Jump to content

Slider is overlapped when displayed on a large screen

Recommended Posts

Hi there,

I installed clean Prestashop 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.


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

  • Create New...

Important Information

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