ecomplus / storefront

Modern and high performant headless eCommerce Storefront. PWA & JAMstack architecture ready for E-Com Plus APIs. Built with Vue.js, extensible through widgets and editable with Netlify CMS.

Home Page:https://developers.e-com.plus/storefront/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Slider height overlap

matheusgnreis opened this issue · comments

Describe the bug
When you have more than one banner, and the second is bigger than the first, we have a overlap, like this:
image

In no case will be good UX to have a slider with banners in different sizes, so the (obvious) "fix" is actually keeping the banners with the same aspect ratio, one of them should be properly adapted in an image editor.

That said, slider height is fixed with first banners aspect ratio to prevent CLS , but if you really want to use images in different sizes (and make UX worse) this can easily be disabled with:

.banner-slider {
    height: auto !important;
}