Hidden slider in displayBanner on large resolution screens

[przemko]

Hi there,

I installed clean Prestashop 1.7.6.3 and use classic theme. I attached the standard slider to displayBanner hook, so it is displayed as full width.

The bug that I spot is that when I enlarge browser width 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 above 1200px, the slider image is still enlarging, but its bottom part is more and more hidden under the background of the item below.

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 1199px 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. See attached picture.

Can you please help? I this issue is probably easy to fix and it looks bad on my shop.

Thanks a ton!

[przemko]

OK. Fixed.

In theme.css you need to change:

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

to:

.carousel .carousel-inner {
    height: auto
}

Would be good if someone from Prestashop include this fix into standard, so it is not overwritten with next update.