Streaming live at 10am (PST)

Switching between columns/Flex


#1

Hi guys,

I’ve got a masonry grid layout that is 3 columns on desktop and resizes to 1 on mobile. I want to have it resize to two columns for ipad/tablet, but webflow doesn’t seem to let me do that?!

Here’s a link to the read only

It’s on the CMS “Projects” page FYI.


#2

Hi @Macker

I would not recommend to use columns here.

You can use a div for your masonry container, and then drag in another div as a parent of your lightbox link (so you can style the divs and not the lightbox links, this should avoid issues/bugs).

Select your masonry container (which is now a div, not columns) and use Text Column count:

47

For desktop, set the number to “3”. Then style your lightbox link parent div if necessary.

For tablet, you can set the number of text column count to “2”. “1” for mobile.

Hope this helps,

Best


#3

Doing that seems to have broken the masonry layout?


#4

Create a new div and put your lightbox-div-containers in it.
In the example below, I created a new div called “mason” and set the Text column count of it to 3 on desktop (2 on tablet, 1 on mobile…)

Capture_d'écran_011818_052542_PM

Capture_d'écran_011818_052815_PM


#5

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