Media Query Exercise 1

• Media Query Exercise 1 HTML page
• Media Query Exercise 1 CSS

Design the page for a small screen

Start the process by viewing the web page at a small window size to simulate what it might look like on a mobile device. Adjust some of the CSS to fine tune how the page displays.

• Make the font-size larger
• Make the h1 font-size smaller
• Increase the leading
• Add a small amount of margin to the page edges

By designing for the small screen first we're using what is known as a mobile first approach. By doing this, we start with a basic design or lowest common denominator and then work on enhancing more sophisticated browsers with advanced features or layouts. This ensures that we're designing an experience that will work for everyone. It also has the side effect of often helping us realize what content on our website is really important.

Finding your browser window size

In Chrome you can easily find out what size your browser window is by using the Web Inspector.

• Open the web inspector in Chrome and resize your browser window while watching the top right corner. The pixel dimensions should appear as you resize.

Introduce a new breakpoint

Start expanding your browser window width. Do this until you get to a point where the design no longer works. For example, the line length might become too long for the text to be easily readable. Or perhaps the page becomes wide enough that it no longer makes sense for the images to display in a stack.

Record the width of the browser window at this point. This will be your first breakpoint. A breakpoint is simply a point at which we're defining that the design should change.

Create a new media query in your browser using the pixel dimension you recorded as the min-width media feature test. Within this breakpoint, change your CSS to do the following:

• Change the background color (to help you see when the media query takes effect)
• Adjust the font-size if necessary
• Adjust the page margins
• Make the photos display in two columns

Create another breakpoint for large screens

Resize your browser window again to find another breakpoint. Add a new media query in your CSS and adjust the following rules:

• Change the background color
• Adjust the font-size if necessary
• Adjust the page margins
• Make the photos display in three columns
• Add a max-width to the page to make sure the line length never gets too long

See Completed Example

• Media Query Exercise 1 Completed HTML page

Below is an example of a finished CSS solution (using floats). Yours will likely look different (because you used flexbox, right?), but should have similar media queries.

/* 
 * @see http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 * apply a natural box layout model to all elements, but allowing components to change 
 */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


body {
  font: 1.2em/1.2 Helvetica, aria, sans-serif;
  margin: 0 3%;
}

h1 {
  font-size: 1.8em;
  margin: .9em 0 0 0;
}

h2 {
  font-size: 1.5em;
  margin: 1.5em 0 0 0;
}

img {
  max-width: 100%;
}

figure {
  background: black;
  border-radius: 5px;
  color: white;
  margin: 0 0 25px 0;
  padding: 10px;
  text-align: center;
  
}

figcaption {
  font-size: .8em;
}


@media screen and (min-width: 794px) {
  body {
    background: rgba(0,0,255,.2);
    margin: 25px 6%;
  }
  
  figure {
    float: left;
    width: 45%;
    margin-right: 4.5%;
  }
}


@media screen and (min-width: 1020px) {
  body {
    background: rgba(0,255,0,.2);
    margin: 25px 10%;
    max-width: 1130px;
  }
  
  figure {
    width: 30%;
    margin-right: 2.5%;
  }
}