Sidebar on top on mobiles and tables

Thanks for using Ignite!

This code should work well. It will place the sidebar above the main content for small screen sizes:

@media all and (max-width: 899px) {

  .overflow-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .overflow-container .sidebar-primary-container {
    order: 1;
  }
  .overflow-container .main {
    order: 2;
  }
}

Please copy and paste that code into the Additional CSS section in the Live Customizer (Appearance > Customize), and it will take effect right away.

Thanks Ben, that works !

Just … all the code samples I found so far for changing the order shown on mobiles or tablets use the max-width parameter with px like you did in “@media all and (max-width: 899px)”.
The resolutions of mobiles and tablets are becoming higher and higher, and the sizes of the mobiles and tablets vary too.
So I am wondering if there is a better way to configure this.
Something like screen size in mm.
But also in case there would be something like a mm configuration, what if the user doesn’t see good and did set the font size of his tablet / mobile phone to max size.
In those cases you should probably have a “max-width” param higher than the default

So what would be the best approach from your point of view?

Your feedback would be very welcome!
Thanks so much
Tom

You actually don’t have to worry about the complex screen resolution stuff. The truth is that a pixel isn’t an absolute unit and takes on different sizes on different screens. Very confusing! But luckily, it’s all taken care of in the background for us by the browsers and device’s OS so we don’t have to worry about those details.

Ignite is coded so that the sidebar appears to the side at 900px and wider, so with the code snippet above, the sidebar is going to display above the main content unless the screen is wide enough for the normal sidebar layout which it will then switch to instead. That happens regardless of the resolution and pixel size conversions going on behind the scenes.

Thanks Ben !
You are awesome

You’re welcome! Stay in touch if you need anything else and I’ll be happy to help.