Help with CSS

Hi there!
I need some help with this please: (thank you in advance)

The homepage sliders images look different in all different sizes of desktop screens. Mainly, they get cut on the sides or on the top or bottom. Depending on the screen’s shape. If it is a rectangle like in laptops or a square like on some PCs. They all look different and remove a chunk from my photos.

To avoid this problem, I would like to have this images to re-size in order to fit all desktop screens starting at 900. (min: 900px)

So far I have got this, but it is not working. Please help. Thank you again!

@media screen and (min-width: 900px){
.shortcode_banner_simple_height_inside {
padding-top: 4rem;
padding-bottom: 4rem;
}
}

Anybody Help? Please :slight_smile:

can you give me a screenshot with demo link hope i can help you

Hi there ! Yes please see attachment. The one where the slide image is not cut on the sides! is on a rectangular screen. And the one that shows the slide image cut on the sides is a square screen.

www.panda-cub.com

would you like to keep your image fit at 900px display size ?
like this http://prntscr.com/ly050i

1 Like

Yes please! I will play with the numbers later.

this issues has not a simple solution but you can try with this

@media screen and (min-width: 900px){
.swiper-slide.center-align.swiper-slide-active {
background-size: contain !important;
}
}

1 Like

you can use it like this http://prntscr.com/ly074j

1 Like

Thank you all! I think I am going to play with the code that you gave me. But this solves most of my problem! Thanks a lot! Happy Holidays!!!

1 Like