Slider is overlapped when displayed on a large screen

[przemko]

Hi there,

I installed clean Prestashop 1.7.6.3 and use classic theme. I assigned the standard slider to displayBanner hook, so it is displayed on full screen.

The bug that I spot is that when I change browser from "mobile-like-size" up, the slider is fully visible and the banner inside is enlarged properly and proportionally only until the picture in banner reaches width of 1182px. When it is resized to 1183px, it gets overlapped by the content & background of displayNav hook. When I increase the width even more, the slider image is still enlarging, but its bottom part is more and more overlapped at the bottom.

I think that may happen when the browser as whole exceeds 1200px. Probably CSS is not prepared for that, so when the media/min-width property is more than 1200px or media/max-width is set to 1199pn and there is no instruction in css what to do next, then the banner is spoiled.

Can you please quickly help me fixing the problem? I'm not css and prestashop guru, so I'm not sure what to change. I tried to change something in the the carousel configuration in theme.css, but it didn't work.

By the way - the cache in my prestashop is switched off and I clear cache every time I change something (blindly) in css just to be sure I see fresh version.

As a test banner I was using 1110x340 px and 1920x400 px images.

 

[przemko]

 OK. Fixed.

In theme.css you need to change:

.carousel .carousel-inner {
    height: 340px
}

to:

.carousel .carousel-inner {
    height: auto
}