Community forum for knowledge and support

Updated 7 months ago

Designing responsive layouts in webflow

At a glance

The community member is asking how to create a design in Webflow, as they tried using a 5-column grid with manual positioning, but this made it difficult to have central control of the design. Another community member suggests using flex instead of grid, and using negative margin on the content to overlap the image, along with a higher z-index. The community members also discuss using the same class names for a flipped version of the design, where the image is on the left and the text is on the right. Additionally, one community member mentions they are currently building a website using this exact layout and offers to share a read-only link.

How would you guys make this design in Webflow? I tried using a 5 column grid with manual position for the content and the image, but this means I don't have central control of these designs in one place.

1
M
E
J
5 comments


Love me some box model questions!

I would start by not using grid and use flex. But you'll have to start first by resetting those pink labels for the manual positions.

And then I would use negative margin on the content to have it overlap the image and make sure to give it a z-index higher than the image. I used 200px for the negative margin but I would do rems. You can adjust this accordingly for responsive.

Ah thank you so much! I love this slack channel

Another question - I have a flipped version of this design, with the image on the left and text on the right. Would you give all of these sections and elements the same class name, whether they have the image on the right or the left?

I had assumed that I would need a different class name for the flipped version, but I think it actually isn't necessary so long as the elements are ordered differently in the dom... Hope that makes sense!

we’re currently building a website that’s using this exact layout. Can share a read only link if you wanna inspect! DM if you do.

can you share with me

Add a reply
Sign up and join the conversation on Slack