Make Image Radio Button responsive

Hi, how can I make my image radio selection responsive?

https://form.jotform.com/211535822760554

Hi,

you can insert the following CSS to your form:

@media screen and (max-width:768px){

.custom-field-frame {

width: 100% !important;

height: 445px !important;

}

}

You can change the height value to suit the look you want.

How to inject custom CSS codes

I hope this helps, please let us know if you need further assistance.

Hi, I have inserted the above css but nothing changes?

Greetings.

Please try adding the following CSS:

@media screen and (max-width:768px){

 li {

  max-width: 100% !important;

  padding: 0 !important;

  margin: 0 !important;

 }

 li div.active, li div.default {

   max-width: 100%;

   /*background-size: contain !important;*/

   background-repeat: no-repeat;

 }

}

Make sure you add it directly to the widget settings. You can click here to learn how.

Have in mind that the image will be fully visible, however, it will be quite squished on mobile devices and hard to read. If you wish, we can also make the images shorter (make their height smaller), however, this will also be hard to see. To achieve this, simply remove /* and */ from the background-size property, so the CSS looks like this:

@media screen and (max-width:768px){

 li {

  max-width: 100% !important;

  padding: 0 !important;

  margin: 0 !important;

 }

 li div.active, li div.default {

   max-width: 100%;

   background-size: contain !important;

   background-repeat: no-repeat;

 }

}

Let us know if you have any additional questions.

Thanks for the feedback.

How can I make this widget hidden on mobile devices? I might add another widget specially for mobile with different images.

Hi again,

Kindly inject the following CSS code INTO THE WIDGET to remove it from the form when viewed on mobile devices:

@media screen and (max-width:768px){

 li, li div.active, li div.default {

display: none !important

 }

}

Related guide: How-to-inject-css-codes-to-widgets

Should you have any further inquiries, we will be more than happy to help.