Jump to content

Hidden slider in displayBanner on large resolution screens


przemko
 Share

Recommended Posts

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!

slider-en.jpg

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More