How do I achieve this layout from the NY Times?

This seems pretty easy, but I can’t figure it out for some reason.

I love this layout with an image on one side and text on the other for an article header. I always love the way it’s responsive.

I can’t figure out how to get this done, but I feel like it’s got to be pretty easy. I know the text is likely a div box flex.

Thoughts?


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

1 Like

Hello @josephmwood

You need a section that will wrap the two divs. The section will have flexbox set to horizontal and height 100vh. The divs will have height 100% of the section. The div with the text needs flexbox vertical centre

Feel free to reach out if you need more help.

Piter :webflow_heart:

3 Likes

I tried doing that and it works well in desktop, but when I change it to mobile it just get’s squashed together at that point. Would I just change the mobile view to block?

Set the two divs inside of your main parent flexbox to 50% width. Make sure this parent flexbox has “wrap children” checked. These two steps aren’t necessarily required but will help on older browsers and will give you more control with the smaller viewports.

When you get to a viewport that requires stacking, set the children from 50% width to 100%. This will make them stack. You’ll want to change that parent flexbox to “auto” or fixed pixel height.

1 Like

I will record my screen so you can see :blush: Give me 10min.

@josephmwood See here > https://www.useloom.com/share/60bdd1e136be4d4d96622ea3c12eb650

2 Likes

I finally got it! My mind was designing it correctly, but I had something checked wrong, lol. Thanks for the help! Super great community of people here!

1 Like

Great to hear man!