Image Slider: Images size display differently on mobile browser

  • Profile Image
    bakedbyc
    Asked on April 09, 2017 at 07:18 AM

    Hi, my form i.

    This images (the logo and the images of the sliders) size display differently on mobile browser, is there any way to make them mobile responsive?

    Thank you!

  • Profile Image
    Jan
    Answered on April 09, 2017 at 09:49 AM

    I checked your form and I can see that the slider images are responsive. Here's a screen capture:

    However, the logo is too big in smaller screens. Please insert this custom CSS Code in order to fix the logo image:

    @media only screen and (max-width: 40em) {

    #cid_3 .form-image {
    width: 176px !important;
    height: 150px !important;
    }

    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes. Here's the result:

    Hope that helps. Thank you.

  • Profile Image
    bakedbyc
    Answered on April 09, 2017 at 10:04 AM

    Hi Jan

    Thanks for the prompt reply! The code works on the logo perfectly! However, the slider images are not displaying properly on my phone ( iphone 7 plus), here's a screenshot of how it display on my phone:

     

    Many thanks!

  • Profile Image
    Mike
    Answered on April 09, 2017 at 11:40 AM

    You may try adding the next CSS to the form:

    @media only screen and (max-width: 40em) {
    .custom-field-frame,
    .slidesjs-container,
    .slidesjs-control {
    width: 100% !important;
    }
    iframe#customFieldFrame_24 {
    height: 349px !important;
    }
    }

    Result:

    Thank you.