Split Screen - Responsive Solutions

Design help General
1

Hello there,

I’ve followed the split screen flexbox video tutorial, it was really helpful, thanks.

But when I go to view the site at different sites, the split screen breaks, understandably. I’d like to move the panels underneath one another at iPad size and below (e.g. text panel, then below the image).

How do I do this? The flexbox DIVs seem to make it harder to edit at iPad/iPhone size without effecting desktop size.

Here is my site:

https://preview.webflow.com/preview/samuel-petyt-design?preview=ed9d1976c6848b9d7bfd7f34c6ff047d

Thanks in advance!

Sam

Here is my public share link: LINK
(how to access public share link)

2

Hello, @Samuel_Petyt.

Here are steps that you need to do on tablet view :

  1. Set “Wrap children” for FlexParent
  2. Change Sizing settings for the div IntroBlock
    242×639 21.4 KB

Cheers,
Anna

1 Like
3

Thats awesome thank you, can you just explain a little about what the advanced sizing does though please, just so I learn the principle of it?

Thanks again.

4

It will “tell” the browser that minimum size of the flex item should be 100%

5

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