Create media query for a sidebar and main container

[fretagi]

Hi all!

I am trying to create media queries for my site which has a sidebar and a main section next to the side bar. I want the sidebar(menu links) to stay on top of main content, when the screen sizes are smaller than 500px…
https://codepen.io/fretagi/pen/RwodOay?editors=1100

[MatchaCrisp]

here’s somewhat of a start. It is going to be a fair amount of fine tuning. For future reference this can be avoided by first designing your website with the narrowest viewport possible (approach called mobile-first) and then adding media queries for bigger screen breakpoints. Also try to use relative units for sizes (e.g. percentage) instead of pixels as that will also save you some more media queries.

@media (max-width: 480px) { 
  #main-doc {
    flex-direction:column;
    width:100%;
  }
  #sidebar {
    width:100%;
    display:flex;
    flex-flow:row nowrap;
  }
  aside {
    width:auto;
  }
  #section {
    width:100%;
  }
 }

[fretagi]

Hi I´ve just use on my main container, the flex-flow: row wrap; and everything is now responsive without using media queries, but thank you for your help