Hi all,
I’m trying to go from a stacked grid on desktop and adjust it to stack each visual and project link one after another on mobile. I want it to be adaptive.
I’m struggling to do this without interfering with my design on desktop. So far when I make the style changes on mobile, it changes desktop too. Any advice for how to do this?
Thank you so much!
Here is my site Read-Only: Webflow - Julia Purcell's Portfolio
(how to share your site Read-Only link)
I had a look but I’m not sure why your structure’s set up the way it is? With the sections inside the container? Why not use a div wrapper? And the grid inside the section… This makes it a bit of a challenge to figure out.
I’d re-do your structure IMHO. Section - container - div blocks for each block containing images and content. You could use grid on the container, that would make the structure easier to figure out.
Since that’s not what you asked, if things change on desktop, or anywhere up rather than down the chain, it’s probably because the value wasn’t set on desktop.
This is how I suggest it’s going to be easier to structure your content
Hi Sarah,
Thanks for your feedback on my structure. I’ve tried to correct it here: https://preview.webflow.com/preview/julia-purcells-portfolio?utm_source=julia-purcells-portfolio&preview=f8185279240bdf21e8f27aff8c4214ee
My only issue is getting the two mobile images in each div block side by side in my top row - any thoughts about how to correct that? And does the structure look better now?
How would I go about fixing the mobile stacking now?
Thank you!
Julia
My next question is - how can I adjust the grid stacking situation on the secondary project pages?
I think I just need to restructure it the way that @sarahfrison suggested: section < container < grid < div blocks. what steps do i take to ensure the content stacks properly on mobile for ?
thank you!
I made you a little screen recording to show you what I would do, @juliapurcell .Take a look Julia Purcell webflow suggestions. If you’ve got more questions, don’t hesitate to ask.
Bless you! Thank you sooooooooooo MUCH!
Hi Sarah - I changed to flexboxes instead of a grid on the homepage. now i’m just trying to get it looking as good as it does in your video. does it make sense to switch my secondary project pages to flexboxes as well? i always thought the grid was best practice but i guess not.
thank you!
Julia
hmm, I’m pretty sure I changed the ‘container’ class to flexbox, not the actual divs holding the content 
. Have you tried pausing the video each time and doing each step as I showed?
I need to go through it more carefully! I will do that. Thank you
I had another look at your project, try adding your ‘div block 4’ class to your other div blocks. This way you won’t have to deal with manually changing everything. That’s going to help 
