Changing Multiple Choice Styling in Advanced Designer

Hi, I added a facebook comments widget to my form, then tested it out on my iphone 8 safari (latest iOS). The widget displays but the comments are merged with the rest of the form. It is as if the form is acting like the comments aren't there in terms of not leaving space for them

Kindly add the CSS below to fix the widget's display issue:

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

 .facebook-comments-widget {

  height: auto !important;

 }

}

Guide: How-to-Inject-Custom-CSS-Codes

That worked but now my screen is wobbly on mobile (it was fixed before) and also the radio buttons have gone smaller?

Hi CrispCuts,

I'm working on this issue. You'll be notified as soon as I'm done. Thank you for your patience.

Do not hesitate to contact us if you have any further questions.

Hi CrispCuts,

That worked but now my screen is wobbly on mobile (it was fixed before)

I checked your form, which is on your website, on the Safari browser (iPhone 8, v13). However, I was not able to replicate any issues. Facebook comment widget and the section "Car Washes and Valeting" seems to fit phone screen perfectly as you can see below:

Could you please give it one more try and let us know if the issue persists? Looking forward to hearing from you.

also the radio buttons have gone smaller?

Could you please add this code below using the guide my colleague shared above? You can play with the scale value (1.5, 2.5 etc.).

.form-checkbox { 

 transform: scale(2); 

}

Do not hesitate to contact us if you have any further questions.

Hi

I tried adding that code and all it did was make the radio buttons larger, but still not the style they were before I added the original code suggested by Vanessa. Also, the screen on my iPhone is still not fixed like it was before. So i have removed your bit of code, but have kept Vanessa's there.

To show you how the style and fixed screen should be, please see my other form:

The Bracknell Directory - Home & Garden (jotformeu.com)

The Bracknell Directory (jotformeu.com)

P.S. When I originally created my forms, I asked Jotform Support for some code to fix the forms so they don't wobble at all. It may be possible that Vanessa's code undid this?

Thank you for providing the links. I now see that you are referring to the "toggle button" display. I remember your form indeed used to have this toggle.

The code I have provided was specifically only for Facebook Comments widget which should not affect that toggle button.

Please allow me some time to carefully check your form if there were other changes or any conflicts that caused the issue.

Will get back to you afterwards.

Kindly open the Advanced Designer page and click on the Multiple Choice field.

https://www.jotform.com/help/935-how-to-access-the-advanced-designer

Within the right panel, change the button template to your previous toggle design. You can make other changes in here depending on what you want. Once done, kindly make sure to click on the Save icon on the left side.

Thanks. When I changed it back to the big toggles my page became fixed again on mobile.

I noticed whenever I open Advanced Designer it automatically changes my toggles back to small and green! Is this a bug?

Hi CrispCuts,

I noticed whenever I open Advanced Designer it automatically changes my toggles back to small and green! Is this a bug?

I cloned and tested your form on Chrome and Firefox browsers. However, I was not able to replicate any issues. The styling you've applied did not change automatically once I opened the Advanced Designer page. Kindly see the screencast below:

Could you please provide us with more information about the issue so that we can assist you better? On which browser did you encountered it? Did you make any changes (except for the toggles) in Advanced Designer, which triggered toggle styling? Looking forward to hearing from you.

Your second question about Facebook comments has been moved to another thread so as to avoid confusion, which is accessible via this link. I'll be answering your question shortly:

https://www.jotform.com/answers/2870441-Final-question-With-the-Facebook-comments-widget-is-there-any-way-to-remove-individual-comments-from-displaying-on-my-form-Or-for-the-owner-of-th

Do not hesitate to contact us if you have any further questions.