canonical / vanilla-framework

From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.

Home Page:https://vanillaframework.io

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Dividers in equal heights component don't work well when items are hidden on smaller screens

bartaz opened this issue · comments

When equal height component is used with has-3rd-divider and we use u-hide--medium to hide one of the column items, the divider appears on medium screen below last item:

image (1)

It's caused by the fact that we are expecting to have 3 elements in right column (but we only have 2 - with one of those hidden).

The dividers being tied up to the container element and grid position, they can't be automatically aware if any items are hidden on small screens.

We need to find a solution to allow flexible adding dividers on specific breakpoints.