Where do media queries fit in?

Everyday we’re trying to make things just a little bit better then they were the day before. It’s never perfect but it gets the job done. Today, we focused a bit more on cleaning up the front end layout via media queries.

We had to find standard break points that worked with our theme.

If you have experience with the Storefront Theme and media queries, please let us know what you came up with as the optimal break points.

Heres what we’ve came up with for now:

/* Media Query breakpoints for the Storefront Theme */

/* Mobile Portrait */
@media (max-width:568px) {
	/* Add style here */
}

/* Mobile Landscape - Tablet  Portrait */
@media (min-width:569px) and (max-width:768px) {
  /* Add style here */
}

/* Tablet Landscape - Desktop */
@media (min-width:769px) and (max-width:1024px) {
  /* Add style here */
}

/* Large Desktops  */
@media (min-width:1024px) {
  /* Add style here */
}