Make Image Radio Button responsive

  • Profile Image
    pathfindmedia
    Asked on June 22, 2021 at 04:56 AM

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

    https://form.jotform.com/211535822760554


    1624352188_60d1a5bc23c70_

  • Profile Image
    Anita_K
    Answered on June 22, 2021 at 09:13 AM

    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.

  • Profile Image
    pathfindmedia
    Answered on June 22, 2021 at 09:20 AM

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

  • Profile Image
    Bojan_J
    Answered on June 22, 2021 at 12:43 PM

    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.

  • Profile Image
    pathfindmedia
    Answered on June 22, 2021 at 01:13 PM

    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.

  • Profile Image
    Amin_N
    Answered on June 22, 2021 at 08:36 PM

    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.