Fullscreen-slider not responsive in mobile (portrait mode)

Hey Thomas,

Could you post a link to where we can see the problem you are having please?

Best regards,
Rikard

Hi Thomas,

Thanks for that, I can’t see any problems on my end using Chrome though. Is this happening to the slider at the bottom which starts with an image with a doctor and a child? Do you have a screenshot of the results you are getting?

Best regards,
Rikard

Hi,

Thank you for the update.

As you can See, in portrait mode the image is cut left and ride.

The slider is supposed to show the images that way because it has to maintain the images’ aspect ratio. How would you like it look like? If you want to focus on the left part of the image, edit the slide and set the “Image Position” to “Center Left”.

Best regards,
Ismael

Hi,

I’d like to have a fullscreen image (filled from edge to edge).

That is possible but we have to distort the image or create space around the slider container. Are you OK with that? If not, you can replace the Fullscreen Slider with the Fullwidth Slider to have the images resize automatically on mobile view.

If you really want to continue using the Fullscreen Slider, this css code should adjust the size of the slider image, but it will create space around the container.

@media only screen and (max-width: 767px) {
    .avia-fullscreen-slider .avia-slideshow > ul > li {
	  background-size: contain !important;
	  background-repeat: no-repeat;
    }
}

This one might distort the image.

@media only screen and (max-width: 767px) {
    .avia-fullscreen-slider .avia-slideshow > ul > li {
	  background-size: 100% 100% !important;
	  background-repeat: no-repeat;
    }
}

Best regards,
Ismael

Hi,

You’re welcome! Glad we could help. Let us know if you need anything else.

Have a nice day.

Best regards,
Ismael