How to make Flexbox side bar stack on mobile

Hey!

I recently learned how to create a fixed side bar layout using Flexbox but notice when I view my site on mobile, I cannot figure out how to make what is the “side bar” on a desktop, stack on top of the main content. By default, of course, they are side-by-side, as they are on mobile.

Does anyone know how to keep the desktop layout, but make these two elements stack on mobile?

Thanks for reading, and any suggestions!

Ed


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

Make sure “flex wrapper” is set to wrap children

On mobile you should set the “sidebar” sizing to “0 0 100%”

Also, add a height to your sidebar. :slight_smile:

Christian

2 Likes

Hi @edblnd, first thanks to @textileranch for the good suggestions :slight_smile: I also have a couple of suggestions:

I hope this helps!

2 Likes

I am consistently blown away by most things I experience in the world of Webflow. @cyberdave, @textileranch, thank you so much for your support. I went ahead with Dave’s recommendation and it works perfectly.

I truly appreciate your time, guys!

Happy Thanksgiving,

Ed

1 Like

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