Streaming live at 10am (PST)

How to make Flexbox side bar stack on mobile


#1

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)


#2

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


#3

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

I hope this helps!


#4

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


#5

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