I'm struggling to get my flexbox to stack

I’m struggling to get the flexbox on my main home page to stack, I am also finding there’s always a white margin on the right div block.

I am also struggling with flexbox stacking on the ‘Leasing’ page. I feel like I’ve tried everything and it’s still not working, what am I doing wrong?


Here is my site Read-Only: Webflow - Copy of Base Camp 59

@basecamp59 - It is usually very helpful to include screenshots to demonstrate what and where the issue is visible.

Apologies! Here’s the screenshots of the main page not stacking on mobile:

Here it is with white space on full screen mode:

And finally here is the leasing page with the same flexbox stacking issue on mobile, first image is on desktop view, second is mobile view:


Hey @basecamp59!

For the stacking, on your tablet breakpoint (or wherever you’d like to stack the columns), switch your flex direction from “horizontal” to “vertical”, as shown here:

image

For the white margin on the map wrapper, remove the max-width altogether from your map image, and instead give it a max-height to control it from getting too large. Around 500px looks about right.

Let me know if this works!

That worked perfectly!!! Thank you so much!

I am just struggling with this item here under one of my containers, how can I get this block to go vertical?

@basecamp59 Same concept! Find the parent of that list element called “Columns 3” and set the flex direction to vertical instead of horizontal at the appropriate breakpoint.

Aha! Ok, thank you, I got it now!