My form lost mobile responsiveness

Question

I used #id{column-count: 3} for a checkbox option list in a form. Now, the form doesn't shrink to 1 column when viewed on mobile. Anyone know how to fix this?

Answer 1

post the code please.

Answer 2

I am using a form service called Formstack. Link to the form - https://learningCurve.formstack.com/forms/list_of_banks

The extra code that I used:

#fsCell63406438{
color: red;
}

.fsBody .fsForm input.fsSubmitButton {
background-color: #d73a31 !important;
border-radius: 10px !important;
-webkit-column-span: all !important;
width: 100%;
}

.fsBody .fsForm .fsFieldCell .fieldset-content{
column-count:3;
}

.fsBody .fsForm{
margin: 20px auto 20px auto;
}

I would really appreciate if you could help me with this.

Thanks in advance.

Answer 3

why not use @media in css for mobile responsiveness

Answer 4

Here is the link to the form -
https://learningcurve.formstack.com/forms/list_of_banks

And here is the code I injected:

#fsCell63406438{
color: red;
}

.fsBody .fsForm input.fsSubmitButton {
background-color: #d73a31 !important;
border-radius: 10px !important;
-webkit-column-span: all !important;
width: 100%;
}

.fsBody .fsForm .fsFieldCell .fieldset-content{
column-count:3;
}

.fsBody .fsForm{
margin: 20px auto 20px auto;
}

Would you mind taking a look at this?

Answer 5

I am gonna look at this. Wait a bit. You said you used id for column-count: 3 but all i see is class. Where is it?

Answer 6

Oh! Sorry. I forgot that I'd changed it afterwards. Now, the given code has been applied. No id.

Answer 7

I can provide the previous version of the code if you need which contained id.