Phase 4: Media Queries

Now that we have a grid system in place, we’re ready to make it responsive.

Media query background, including syntax and how they can be used (it’s more than pixel breakpoints!): https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Great tutorial: http://css-tricks.com/css-media-queries/

The usual question now is where should breakpoints be placed? A breakpoint is the point where CSS rules either start to apply or stop being applied to the page. 

Here’s some typical media queries used with a 960px grid system:
http://www.sitepoint.com/build-a-responsive-design-using-960-grid/
.img {width:100%;}
 
/* Everything before the media queries gets
applied to screen sizes greater than 960 pixels */
 
/*****************/
/* MEDIA QUERIES */
/*****************/
 
/* Tablet Screen Sizes */
@media only screen and (min-width: 768px) and (max-width: 959px) { … }
 
/* Mobile Landscape Screen Sizes */
@media only screen and (min-width: 480px) and (max-width: 767px) { … }

/* Mobile Portrait Screen Sizes */
@media only screen and (max-width: 479px) { … }

Note that this design is not “mobile first” — it builds the desktop layout, then makes the layout progressively smaller.

Bootstrap uses the following media queries (which are mobile first):
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

What are the right media queries for you? It depends on your design and how things look. Also, mobile first or “desktop first” may also be the right approach for you.

(Why did we use “desktop first”? Because we’re retrofitting a site that was already created with new data to make it work on a desktop. If you want to build with “mobile first”, the procedure is the same as described in this tutorial, but your default styles are the mobile settings. After that, add media queries for when the page is wider.)

We start by putting in these media queries and styles:

/* media queries */

/* Mobile Landscape Screen Sizes */
@media only screen and (min-width: 480px) and (max-width: 767px)  {
 .col-1,
 .col-2  {
	width: 44.9999999%;
}
.col-3,
.col-4 {
	width: 96.66666%;
}

}

/* Mobile Portrait Screen Sizes */
@media only screen and (max-width: 479px) {
  [class*=‘col’] {
	margin-left: 0;
}
  .col-1,
  .col-2,
  .col-3,
  .col-4  {
	width: 96.66666%;
}
}

Note that the widths and layouts will change with the structure of the page.

However, the above layouts don’t work well with a 1-3 layout. In this case, we may want to differentiate .col-1 into two types of situations. .col-1-2 will go from a single column at large sizes to spanning 2 columns at smaller sizes. .col-1-4 goes from occupying one column at large sizes to occupying all 4 columns at small sizes. This gives us more flexibility in layout for smaller screens and results in the following changes to CSS (maintain the other styles for columns 2-4):

/* media queries — final code */

/* Mobile Landscape Screen Sizes */
@media only screen and (min-width: 480px) and (max-width: 767px)  {
 .col-1,
 .col-2,
 .col-1-2 {
	width: 44.9999999%;
}
.col-3,
.col-4,
.col-1-4 {
	width: 96.66666%;
}
 .col-1-2,
 .col-1-4 {
	background-color: #ccf;
}

}

/* Mobile Portrait Screen Sizes */
@media only screen and (max-width: 479px) {
  [class*=‘col’] {
	margin-left: 0;
}
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-1-2,
  .col-1-4  {
	width: 96.66666%;
}
}

Finally — don’t forget to add the new classes into the desktop versions of the code. 

Around line 115, change 
.col-1 {
	width: 20.83333%;
	background-color: #ccf;
}

to this:

.col-1,
.col-1-2,
.col-1-4 {
	width: 20.83333%;
	background-color: #ccf;
}