Best way to make a split screen design

I am trying to achieve a half page split as you can see from my share link. It works great in flex - on the desk top, but on smaller devices the preview looks awful.

Using just a column in a section makes the responsive layout look far better, but I can’t get the background image to automatically match the size of the column with the text.

Can anyone advise on the best way to achieve the look without compromising the layout on smaller screens please?

https://preview.webflow.com/preview/toadhall?preview=dea451e37a014c29c1fe2dcbc590311e

1 Like

Can anyone help please?

There has to be a Webflow expert out there somewhere who can help please?

Hi @Roxzfr great question, it looks like you were able to get everything arranged on desktop on tablet viewports but were struggling with the mobile breakpoints.

I’ve uploaded a GIF here showing how to change your flex settings to a vertical stack on mobile and assigning height styles to your empty divs that had background images: Screen Recording 2017-06-12...

Hope that this helps :bow:

Thank you @Waldo, I am sure it will. This is my first time designing with Flex.

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