Media Query snippet for quick recall

Posted on July 5, 2020

I've always check in previous projects the proper way to write a Media Query for mobile-first project.

I can't memorize it, don't know why.

So, here the snippet, a rule that apply by default (mobile-first) and the media query that override for tablet/desktop viewport:

.wrapper{
  display: flex;
  flex-direction: column;
}

@media screen and (min-width:420px) {
  .wrapper{
    flex-direction: row;
  }
}