Displaying 7 items horizontally and responsively

I have 7 images that I want to display in a single logical row. They are siblings and of equal importance. 7 does not divide into 12 which in my mind makes this an impossible fit for the “Columns” container. Does that make sense or am I wrong?

Currently I have displayed it as a 7 column Grid with 1 row. That works OK on desktop but I’d want to switch to 3 rows on Tablet. It tried to do that but I couldn’t get the rows to size properly.

I think I havee any issue with the “look container” link block not taking enough height

Any thoughts?

Read Only link is


Here is my site Read-Only: Parabola
(how to share your site Read-Only link)

Hi Patrick,

You could probably do this by using webflow’s CMS functionality and setting the collection list to a flex layout in desktop mode and grid layout for tablet and phone resolutions.

Cheers

1 Like

So would I convert the Grid to a Div Block so I can chanage it’s Display from Grid to “Flex box”?

I tried that and went into the Tablet breakpoint and swicthed to flexbox but I could not see how to define the column breakdown like you would when using “Columns”

What have I missed?

I went with a grid layout in all resolutions and just chnaged number of columns at different break points.

Thanks