Making the slider widget mobile responsive.

Hi,

I'm trying to make this forms (https://eu.jotform.com/build/73155487907366) slider mobile responsive.

I've added the mobile responsive widget to the form and added this css at the end of the forms CSS.

But its not working. The images are rendered as squares... not preserving the original image ratio...

Thanks for your precious help!

M

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

.custom-field-frame,

.slidesjs-container,

.slidesjs-control {

    width: 100% !important;

}

}

The slider appears fine on my end.

What device are you using? Is the form embedded on your page?

Please also try clearing your browser cache and see if that solves the problem.

Iphone 5S.

It squares the images. I have the impression it first shows them right for a few miliseconds and then squares them.

Thank you for contacting us. I hope when you say it squares the image you mean is that is stretches the image as shown below.

I have managed to fix the error by inserting height:100%; in the css you provided as shown below:

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

 .custom-field-frame,

 .slidesjs-container,

 .slidesjs-control {

    width: 100% !important;

    height: 100% !important;

       }

}

This is how it displays now

Fixed!

Thanks!