Problem items not shown on the same row even if theres enough space

For some reason I’m unable to make the black boxed item 2 appear on the first row along with item 1. Do note if I use flex on container-loop-items class div it generates other problems so I’m trying to figure it out without flex.
Here’s a codepen with the code:

In my original code theres only space for two items per row but in the codepen actually all the items should be on first row, i will add more items to the pen

They should be responsive that is if theres enough space show all the items possible in the same row

Okey on it, the sketch is for both mobile and desktop?

for both? the only differnece is that in desktop there should b more space hence more items per row.

heres the sketch for desktop

grey area is page width… im making a mobile one wait me a bit

heres the mobile one

Idon’t know why the items are wrapping even with space :confused:

further tests: even if the direct container has space is not used:

Let me know if there’s anything else that can be helpful

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.