Strange issue with columns on frontend

Beta
#1

It’s too long to write ) just look at video.
flex-basis issue

www.loom.com/share/49c6ada9bb3f4e3c8ce9f9f7c5135b77

So… If viewport is smaller 1200px the flex-basis of FIRST (1) column becomes 100% (insead of 33.33% (3-cols row)).

FIND ANSWER. IT’S HORIZONTAL GAP CREATE DAT. IF IT SET TO 0 EVERYTHING WORKS FINE.

Is it right?

UPDATE. Bonus video:

www.loom.com/share/a7aa770c36d840a0a7066b4eeaa6dd49

On 3 columns layout on @media (max-width:979px) must be 1 col but works like 2 cols:

@media (max-width: 979px) and (min-width: 768px)
.e117-108 > .x-row-inner > *:nth-child(2n - 1), .e117-169 > .x-row-inner > *:nth-child(1n - 0) {
    flex-basis: calc(50% - 5rem);
}

.e117-169 > .x-row-inner > * {
    margin: calc(3rem / 2) calc(5rem / 2);
}

Bonus video #2:

www.loom.com/share/28c8132ecc5f445d9b9062714c0cc42f

3 cols layout set to 1 col on 767 and smaller, but shows like 3 with any settings )

LAST UPDATE. SOMETHING WENT WRONG WITH X PRO UPDATE TO BETA 6, IT WAS 5. IN 6 EVERYTHING WORKS FINE. SORRY

#2

Thanks for confirming! Yes, I do recall that happening in 5. Was able to confirm thanks to some testing on Scot’s site and get it working.

Just let me know if you see anything outstanding that is related to this in beta 6.

2 Likes