Revslider full size images showing on mobile but not on desktop

[lizbonney]

Hi Guys

Sorry for the repeat question, I can’t find the original thread with the info my original question re the rev-slider images showing as full size on a mobile but they crop on a desktop.

I followed the instructions on the previous post but I am still having the same issue, the images look great on a mobile but are cropped on a desktop. I’ve also had a good read of the following and can’t solve this problem. Any advice would be greatly appreciated, thank you.

Website: https://yogastudio.net.au/

1. inspect each slide and under source settings, set the background fit to (%,% 100 100)
2. add the following code to global CSS:
   .rev_slider .slotholder .defaultimg {
   background-size: contain !important;
   }

[lizbonney]

Hi there, sorry I meant to add to this post that I tested the above steps with the first slider on the following page with the pics of the hotel:

https://yogastudio.net.au/pushkar-2019/

It has squashed the images rather than made them full size. Has anyone else has this problem?

[paul.r]

Hi,

When I added this css code

.rev_slider .slotholder .defaultimg {
    background-size: contain !important;
}

This is how it looks

See Video - https://www.screencast.com/t/ZZpleIjCzXdi

Can you please confirm if that is what you are trying to achieve.

Thanks

[lizbonney]

yes, thank you so that the images are not cropped, that’s great. So do I just add the code and also inspect each slide and under source settings, set the background fit to (%,% 100 100)

[lizbonney]

Its ok I figured it out I needed to make the slider the right dimensions in the main settings so it matched the image size.

THANK YOU ALL SO MUCH

[paul.r]

You’re welcome!