media queries & mobile first

what do we mean by design?

mobile first design

what do we gain from this idea?

  • focused user experience
  • mobile friendly webpage
  • better desktop webpage

How do this?

lets create a

mobile UI

lets create a

desktop UI

media queries


/* on small screens */
h1 {
  border: 1px solid green;
}

/* on big screens*/
@media (min-width:600px) {
  h1 {
    border: 1px solid pink;
  }
}

/* on small screens use the CSS here*/ 
main{
 display: flex;
 justify-content: center;
 flex-direction: column;
}

/* on big screens use the CSS here*/ 
@media (min-width:800px) {
 main {
   justify-content: space-around;
   flex-direction: row;
  }
}

see this in action.

media queries & mobile first

By Mark Dewey

media queries & mobile first

  • 235