How Can I Keep Image Size Same When Mobile Responsive is Enabled?

  • radiocoders
    Asked on December 25, 2015 at 10:20 AM

    Hello,

    how can I keep my images , example 170:50px.

    When I open my forms on any smart phone , mobile resposive widget expands all my images .

    I really want to keep this widget but I need my pics to stay same size.

     

    please see here (select model first)

    https://form.jotform.com/53575584012961

     

    Thanks a lot!!!

  • mert JotForm UI Developer
    Replied on December 25, 2015 at 10:36 AM

    Hi there,

    By injecting some custom CSS, you can beat this issue. Below, you will find the necessary CSS code from the below:

     

    .form-image{

    width:170px !important;

    height:50px !important;

    }

     

    I hope this will meet your needs. Please, let us know the results.

    Thanks.

  • radiocoders
    Replied on December 25, 2015 at 10:55 AM

    Great , that worked. One more thing please, I need to exclude one image (MB alpine label) from that rule. Can I have CSS code for that?

    Thanks!

  • radiocoders
    Replied on December 25, 2015 at 1:26 PM

    Please tell me how to use custom css you gave me , but leave one image 15)MB Alpine label width 250px.

     

    Thank you again!

  • Welvin Support Team Lead
    Replied on December 25, 2015 at 3:30 PM

    What image from the form? Let us know so we can check this for you. 

  • radiocoders
    Replied on December 25, 2015 at 3:34 PM
  • Welvin Support Team Lead
    Replied on December 25, 2015 at 4:55 PM

    I think you are referring to the other form. This form http://www.jotformpro.com/form/53575584012961, correct? If yes, inject the following custom CSS codes:

    #cid_20 > img {

    width:250px !important;

    }

    Try it and let us know if this works or not.

  • Charlie
    Replied on December 26, 2015 at 1:33 AM

    Try replacing your custom CSS code with this one:

    #cid_3 > img {

        width : 170px !important;

    }

     

    #cid_4 > img {

        width : 170px !important;

    }

     

    #cid_5 > img {

        width : 170px !important;

    }

     

    #cid_7 > img {

        width : 170px !important;

    }

     

    #cid_8 > img {

        width : 170px !important;

    }

     

    #cid_11 > img {

        width : 170px !important;

    }

     

    #cid_20 > img {

        width : 250px !important;

    }

    Paste it under the CSS tab in your Form Designer Tool.

    How Can I Keep Image Size Same When Mobile Responsive is Enabled? Image 1 Screenshot 20

     

    Noticed that the last image is the one referring to "MB Alpine Label" with a width of 250px. The other CSS selectors refers to the other radio images in order. Here's a cloned form with those changes: https://form.jotform.com/53590670035959.

    Let us know if that works.