Website / Slider not responsive on Enfold theme

Hi,

We are very sorry for the late response.

It can’t be possible that the slider can not show whole image on smaller screens.

How can you contain a large image on a small screen with a different aspect ratio without distorting it? It’s possible but you have to remove some parts of the image. Another workaround is to apply a different version of the image for each slide on smaller screens with the following css code.

@media only screen and (min-width: 768px) and (max-width: 989px) {
/* slide 1 */
.avia-fullscreen-slider .avia-slideshow >ul > li:nth-child(1) {
    background-image: url(IMAGE FOR TABLET) !important;
}

/* slide 2 */
.avia-fullscreen-slider .avia-slideshow >ul > li:nth-child(2) {
    background-image: url(IMAGE FOR TABLET) !important;
}
}

@media only screen and (max-width: 767px) {
/* slide 1 */
.avia-fullscreen-slider .avia-slideshow >ul > li:nth-child(1) {
    background-image: url(IMAGE FOR PHONE) !important;
}

/* slide 2 */
.avia-fullscreen-slider .avia-slideshow >ul > li:nth-child(2) {
    background-image: url(IMAGE FOR PHONE) !important;
}
}

I checked the forum and your colleagues gave some codes to some participants and fixed problems similar to mine. Can you tell me which code should I use so people can see the whole picture on mobile phones?

Did you test the codes? Please provide a url to thread and we’ll check it.

Best regards,
Ismael

Hey!

This code is not working for me, I tried it.

It is working on our installation. Please provide smaller versions of the images and we’ll apply it in the css above.

Look at this example, I want this. Image is not distorted its just smaller on smaller screens:

Where can I find that page? Yes, the image resizes to the browser width but it’s not full screen either which is the whole point of using a full screen slider. If you don’t need the slider to adjust to the browser screen, please replace it with the full width easy slider.

Cheers!
Ismael

Hi!

Where can I provide the smaller image? What are the exact dimensions?

You can use dropbox or any file sites or servers. If you’re targeting iPhones with retina display or smart phones in general, 640-650px should be good enough.

Revolution Slider and the pictures are responsive on every device, they don’t distort.

Yes, the images are not distorted but the slider is not full screen either. Again, you can use the full width easy slider if you don’t need a full screen slider. Or create another full width slider and use it to replace the full screen slider on mobile. Please follow these instructions.

// http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

Cheers!
Ismael