Hi there!
I designed a preview of my work which has different sections flowing in as you scroll. Each section has an image, a headline and a paragraph line. I wrapped them in a div block and also wrapped two sections side by side in a div block (not sure if I need to?) Here is a screenshot:
Anyway I must have done something wrong because on mobile it looks like this:
Would love to solve this as I have many pages that will require similar side by side image approach, thank you! 
Anyone? I tried to find a tutorial on this and I can’t seem to find one that is similar to my problem.
On Desktop things will flow naturally, however as the screen size decreases, each element will need a size declaration for the css to push full width, or they will shrink within their own space. Add 100% or 100VW for each element you want to push across. This will force wrapping for other elements.
Now if you want different layouts for desktop and tablet. You’ll need to adjust a couple of ways. There are 3 or 4 ways to do it. Alternatively, you can simply adjust each device’s view manually for the 100%.
@garymichael1313 Thank you so much for responding! But I’m still not quite following, I tried to do the 100VW on the div of each work project, but it just made it stretch all across and looked broken. I created a link of my port, I know it’s not as fancy as other websites I’ve seen (ha!), this stuff doesn’t come easy to me and I’m cramming a lot of info in the last 3 days 
Maybe you can see what I did wrong? It’s on the home page:
No not even close, you’re joking right? This site is SUPER nice!! Whatchu talkin bout Willis? 
I like it a lot.
So okay, this type of setup is a little tricky to explain in text. But I’ll do my best. This is going to require either / or:
Flex layout - using %'s for each device type. It will auto-expand and shrink based on the flex css designated. It will require a removal of all the css settings on ‘inner/child’ elements. Flex is best for outer / wrapper divs. This option is more automatic and free-flowing, and provides a set it - and - forget method. If you don’t plan on making a lot of changes this may work.
Column layout - using the column as the guide for all inner content. This method is a little restricting in nature, but has a structured approach that - in essence forces all the content to move as one unit. Independent movement of content is restricted to the ‘css settings’ of the parent column. This will definitely wrap images and other content easily. It’s viable option if the “main section” all the content is in won’t be adjusted.
Individual nested divs - using multiple layers that guide each other independently. Obviously, this method takes a little more time and planning for it to work; but it offers the most flexibility. This format will allow for the most changes/adjustments to images and content, especially if you plan to make frequent changes. When making changes, inevitably there will be size differences, spacing, etc that will start to push content around the page. Nested divs allow for simple tweaks that are fairly unnoticeable because it’s padding, margins, things like this. When adding little css tweaks on columns or flex, things can become challenging.
With your current page layout, I would recommend one of these to be implemented. Granted it will take a few hours to do it right, but it will be a one-time deal. If you do it by tinkering with css, things will become annoying later on, I’d fix it now. You wouldn’t need to keep playing with css.
This is my recommendation -
@garymichael1313 oh man thank you!!! I really appreciate the kind words, seriously when you stare at your work for a while and then see others work, you kind of start to doubt it a bit.
I just saw all this crazy animation and movement and transitions on some other folks websites that they shared and thought this will take some time to figure out. But I did want my website to be responsive as the one I currently have is not. I also restructured how I want to show my work as well as added more projects, I definitely wanted it to be a bit more impactful and I was so glad I found Webflow! This is truly an amazing platform that allows you to do amazing things, plus gives you a good basic understanding of internal web design (I don’t code as it hurts my brain!) lol
I really appreciate your thorough response! I am going to read your options carefully, digest it and try it out on a new page. I’ll reply once I do! Thank you again!!
@garymichael1313 I did a little one off page — to start fresh. I followed the flex mode and seems that the mobile is correct now, but I can’t figure out how to get the divs to be next to each other in that overall 1000px wide div, so that they can e two in line and then drop to the next and so on. Here are some screenshots:
DESKTOP SECTIONS AND DIVS VIEW:
DESCTOP TOP DIV VIEW:
DESCTOP BOTTOM DIV VIEW:
MOBILE TOP DIV:
MOBILE BOTTOM DIV:
Can you see if I missed something?
Thank you again!!
No problem, you’ve done a fabulous job so far! I like the direction 
For the Flex layout:
On desktop, you’ll need to use a “Parent Wrapper” to restrict the inner content. Add sizing to that wrapper. Like 85VW or 85%. Then the inner divs will need to “Stretch” on both divs. This set them side by side.
** Oh noooo, don’t use a container! Use a Section then set size on the section. Or use Section for main wrapper, then add a Div with Flex, then add size 85VW on that Div. Try to stay away from containers - using your layout structure. Your site has vectors, photos, etc that will need spacing.
@garymichael1313 Thanks so much! Ok I’m going to digest what you said again and get back to you later with how it goes!
@garymichael1313 ok I am lost 
I just don’t understand… What do you mean by Parent Wrapper. is that a div?
and 85% does that go into width? I tried that and it just made my blocks slightly smaller within, but still stacked on top on each other on desktop…
