How can I make the Image Slider maintain an aspect ratio for mobile, tablet and desktop?

  • Profile Image
    Charlesobi
    Asked on August 14, 2017 at 02:05 PM

    I inserted the Image Slider Widget But I found out that it doesn't maintain an aspect ratio in a narrower screen device (Mobile). It shrinks down the width while leaving the height, making it shapeless in mobile.

     

    This is the form: https://form.myjotform.com/61965333413556

     

    Thanks, hoping for your helpful reply

  • Profile Image
    BJoanna
    Answered on August 14, 2017 at 02:24 PM

    Please add this CSS code to the Image Slider CSS:

    .slidesjs-control img {

    height: auto !important;

    }

    Hope this will help. 

  • Profile Image
    Charlesobi
    Answered on August 14, 2017 at 04:13 PM

    Ok, thanks. I have done that, but there is another issue. The Controller icon appears much below the slides. Pushing down the text below it - this caused a huge gap between the slides and the text below. It doesn't look good.

    How Do I correct this? Thanks for the support so far, waiting for your helpful reply.

  • Profile Image
    Welvin
    Answered on August 14, 2017 at 04:42 PM

    I've fixed it for you by injecting the following custom CSS codes;

    In the form CSS:

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

    iframe#customFieldFrame_77 {

        height: 385px !important;

    }

    }

    In the widget CSS area:

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

    .slidesjs-control {

        height: 349px !important;

    }

    .slidesjs-container {

        height: 350px !important;

    }

    }

     

    These are mobile queries which mean the CSS will only work when the form is viewed on mobile devices. 

    Please check again and let us know if the layouts are still off to your end. 

  • Profile Image
    Charlesobi
    Answered on August 15, 2017 at 05:01 AM

    Ok, thanks. But the space between the slider and controller is still large. Also the space between the text below the controller is also. I will like to have it look like that of the desktop view. 

    Thanks for the support so far, hope something can be done about that. 

  • Profile Image
    Chriistian
    Answered on August 15, 2017 at 05:29 AM

    To decrease the large gap between the slider and the text below, please try injecting the folllowing CSS:

     

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

    li#id_77 {

        padding-bottom: 0;

        margin-bottom: 0;

    }

    li#id_80 {

        padding-top: 0;

        margin-top: 0;

    }

    }

     

     

    This should be the result:

     

     

    Please have a try and let us know how it goes.