Responsive Design Exercise: GuitarMania 2017

First, please download the files you’ll need for this exercise.

Once you unpack the downloaded zip file, open the main folder in your code editor. You will see that you have two folders: one for images and one for your CSS files.

In this exercise, we are going to use a mobile first methodology to build the index page of a site devoted to Gibson guitars.

If you are taking my ECUAD Advanced WordPress course, we will build this site and then turn it into a WordPress theme.

Here’s what our final comp is going to look like:

Desktop View: Click for expanded image


And here it is in the iPhone simulator:

iPhone view. Click for expanded image.


The keys to this kind of layout:

  1. Percentage-Based Widths
  2. Fluid Images
  3. CSS3 Media Queries
  4. The Viewport Meta-Tag

The Basic Setup

First, we will download a reset stylesheet to use as a foundation for the project.

To do this, go to the normalize.css webpage and download the latest version of this “starter” stylesheet into the empty css folder. Name it normalize.css. 

This stylesheet neutralizes differences between browsers so we can build upon a level playing field. One browser might have different default values for margin, or padding, or font-sizes, etc etc,  than another browser. This can cause layout problems. The purpose of reset stylesheets is to get all browsers reset in such a way that they behave the same way with all elements.


Next, go to HTMLShell.com to get a starter HTML file. Before copying it, however, click the button to include the viewport meta-tag. I will explain what viewport does later in this exercise. Save the index.html file at the top level of the site folder.

Wire up the stylesheets to this html file by adding the following two lines inside the <head> of your document.

<link href= "css/normalize.css" rel= "stylesheet">
<link href= "css/style.css" rel = "stylesheet">

Make a file called style.css and save it inside the css folder.

Put the phrase Guitar Mania inside your <title> tags.

Inside the <body> of your document, put in the following code for the header .

( Type it out rather than cutting and pasting from my website: this will help you memorize the tags and concepts. )


<h1>Guitar Mania</h1>

  <li><a href="#">Guitars</a></li>
  <li><a href="#">Amps</a></li>
  <li><a href="#">Players</a></li>
  <li><a href="#">Lessons</a></li>
  <li><a href="#">Search</a></li>
  <li><a href="#">Contact</a></li>


Test your page. Make sure that this content is showing up.

Add The Main Content

Now wrap everything that’s inside the body tags inside a DIV with a class of wrapper. This will set the ultimate wrapper for our content. We will style it shortly.

After the closing <header> tag (but inside the .wrapper DIV), put in the following code.

<section class="original">

  <h2>Original Models</h2>

  <div class="guitar-small">
    <a href="#">
      <img src="images/custom.jpg">
      <h3>Les Paul Custom</h3>

  <div class="guitar-small">
    <a href="#">
      <img src="images/goldtop.jpg">
      <h3>Les Paul Goldtop</h3>

  <div class="guitar-small">
    <a href="#">
     <img src="images/standard.jpg">
     <h3>Les Paul Standard</h3>


What we are doing here is the following:

  • Grouping the content with a section tag and an explanatory h2.
  • For styling purposes, wrapping a DIV around each image and the h3 text that identifies it.
  • Wrapping a link around the image and the h3 (even though the anchor tag is inline, this is allowed).

Test the page in a browser. It should now look like this:


The first problem we notice is that under a certain size, the images go beyond the edge of the browser window rather scaling with the page.

Responsive Images

The solution, and a fundamental technique of Responsive Web Design, is to make your images resize to fit your box. It’s easy to do this.

Open the file style.css if it isn’t already open. Add the following style:

img {
  max-width: 100%;
  height: auto;

.guitar-small img {
  border: 1px solid #888; /*For design, not for responsiveness. */

Test your page now. Shrink it to see if the images are scaling down and have the border. The page should look like this:

Images scaling responsively

Make More Rows

If it does look like this, copy that row of guitars (the <section> with a class of original). If it doesn’t look like this, consider validating your html & css.

Paste that row twice after it. Change the classes of the pasted outer <section> elements to budget and artists, respectively.

Change the h2 text in the second row to Budget Models and the H2 text in the third row to Artist Models.

In the second row, change the H3s to: Les Paul Junior, then another Les Paul Junior, and finally Les Paul Special.

In the third row, change the H3s to: Alex Lifeson, then Peter Framptonand finally Ace Frehley.

With rows two and three, change the images in the inner sections to their correspondingly named guitar pictures (there are two Les Paul JRs, but the image names reflect that).

Finally, change each comment that ends each row, to reflect the changes you’ve made to each section.

Test the page. Make sure that all the images and headings are different.


Go to the Google fonts website and select the fonts Oswald (weights 400 & 700) and Roboto Slab (weight 400 only). If you need to review how to do that, consult this page.

Now let’s make our basic typographic decisions. In your style.css file, add the following CSS;

h1, h2 {
	font-family: oswald, sans-serif;

h1 {
	font-weight: 400;
	color: white;
	background-color: #000;
	margin-top: 0;
	padding-top: 3rem;
	text-align: center;

h2 {
        font-weight: 700;
	text-transform: uppercase;
	font-size: 2.6rem;
	text-align: center;
	margin-bottom: .75rem;
	margin-top: 2rem;
	line-height: 1;

h3 {
	font-family: "Roboto Slab", georgia, serif;
	font-weight: 400;
	margin: 0;
	font-size: .75rem;

a {
	font-family: "Roboto Slab", serif;

Test your HTML page at a narrow browser width. It should look more or less like this:

Obviously, our content is getting too close to the end of the browser window.

Wrapper DIV

The purpose of the WRAPPER div we put in earlier was to have a box with which to easily style our main layout.

Add the following to your stylesheet. Because the wrapper div is our main structuring element, I would put it just after the BODY style.

.wrapper {
  margin: 0 2%;

The page should now look like this:

In other words, we have now pushed the all the content away from the left and right edges of the browser.

Later, when we work on our desktop view, we will modify the .wrapper style more.

More Header Tweaks

Let’s work on the menu.

/* MENU and LINKS =========================================== */
a {
  font-family: "Roboto Slab", serif;
  text-decoration: none;

nav ul {
  list-style-type: none; 
  margin-left: 0; 
  padding-left: 0;

nav li {}

nav a {}

The NAV UL style here is an extremely common approach: we are removing the LIST dots with list-style-type: none and clearing up the space the browser made for the dots. ( We use margin-left and padding-left because different browsers have used different defaults ).

If you test the page, you will see that the dots are gone and the list is now sitting fully to the left of the wrapper.

Now let’s arrange and style the menu as in the iPhone simulator screenshot at the top of this page.

Modify your link and menu styles as follows:

nav a {
  font-size: 1.4rem;
  line-height: 2;
nav li {
  background-color: #ccc;

This will create the following presentation of our menu:

Now add the following styling

nav li {
  background-color: #ccc;
  border: 1px solid white;
  float: left;
  width: 50%;

Test the page. The results might surprise you:

Two things are happening here:

  • Because our LIs have borders, their width is 50% + 2px. This means that they won’t go beside each other.
  • The h2 is coming up beside the floated LI elements.

This kind of thing often confuses people, but there is an easy fix. Add box-sizing:border-box to your NAV LI style. This will make the browser treat the border (and padding, if the style has it) as inside the box. Very useful, indeed.

A few more tweaks remain. First, add the following to your h1 style:

h1 {
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;

This will give you rounded bottom corners on your site name (the h1).

Add text-align:center to your NAV LI style to get the links to sit in the center of their containing elements.

Finally, add display: block to your NAV A style. This will make the links cover the full width of their containing elements (so mousing over the LI will cause the browser to display the pointer cursor that indicates links).

Test your page. We’ve got much of the mobile layout covered now.

Our First Clearfix

But if you scroll down the page, you will notice that the browser appears to be ignoring the margin-top on the first h2.

In contrast to the above screenshot, here is the second h2 in the page.

Both h2s share common styling.

What’s happening here, however, is common when you use floated elements. Specifically, if all the children (or the last children) of an element are floated, the parent element will appear to shrink (ie backgrounds will disappear and borders will collapse). The reason for this is to allow subsequent elements to come up beside the floated element.

This is, in fact, desired behavior: think of a tall image in a short paragraph: if we float it, we want subsequent paragraphs to come up beside the image.

In our case, since the NAV UL’s child LIs are all floated, they hang out of the UL.

The secret to fixing that is to use the clearfix hack.

For an explanation of clearfix, read this.

Copy the clearfix code from here. (You can omit the comments and the IE 6/7 code, too). Paste it into your style.css file.

NoW, apply the clearfix class as an attribute to the UL that’s inside your NAV.

<ul class="cf">

Test your page. You should see that the clearfix has made it appear that the first h2 now has a top margin again. This is because the UL has “grown” to encompass its floated children.

Additional Layouts: Media Queries

Media Queries allow us to direct additional or different styles to different viewing conditions.

For example, we could hide advertisements and change the paragraph font-size when the document is printed (notice the used of points and inches, which make sense for print but not for screen):

@print {
  .ad {
     display: none;

  p {
    font-size: 9pt;
    line-height: 11pt;
    margin: .25in;

}  /* end print query */

Each query starts with an @ symbol. Often it will also include a condition. For example, this series of queries will change the body background-color as the page size increases:

@media screen and (min-width: 500px) {
     background-color: orange;
} /* end 500px min query*/

@media screen and (min-width: 800px) {
     background-color: red;
} /* end 800px min query */

@media screen and (min-width: 1000px) {
     background-color: yellow;
} /* end 1000px min query */

Think of each query as an additional stylesheet.

As noted, we’ve been building this guitar site using the Mobile First methodology. The simple background-color example above shows how we will continue the build: with a series of escalating-value min-width media queries.

Here’s why Mobile First makes so much sense:

Since block elements already take up 100% of their containers, and since typical phone layouts are often predominantly single-column, the phone layout is the easiest one to do.

Moreover, by first making the styles that are common to all our layouts, we can build UP rather than DOWN. In other words, we will add more complex layout styles as the browser width increases, rather than remove them as the browser width decreases.

When smart phones first came out, designers typically took a Mobile Last approach. They would build the wider views and then use media queries to simplify or undo some of the layout at smaller widths. Mobile First means less work because we don’t have to undo anything we build.

Back to our Task

If we look at the desktop width screenshot at the top of the page, we’ll see some obvious divisions. For example, the h2s and the guitar-small DIVs are four per row. So we could style them like this (put the query after your other styles, so they don’t get overridden):

@media screen and (min-width: 700px) {
  h2, .guitar-small {	
	margin: 1%;
	width: 23%;
	float: left;
} /* end 700px min query */

Test your page. Shrink it as much as the browser will allow. Here we see the phone layout. Now make the page wider. Eventually we will see the 700+ layout change to something like this:

As you make the page bigger, the layout will end up looking like this:

The reason for the first problem (700px to approximately 800px) is that as the images scale down, their enclosing DIVs get shorter, too. As a result, the h2 boxes are taller than the .guitar-small boxes. This causes each succeeding row to get enjambed.

The reason for the second problem is that the Les Paul Special image is a pixel or two shorter than the other ones. As a result, the h2 in the third row gets enjambed, too.

The solution to both problems: clearfix the SECTIONS. This will make each section exactly as tall as the highest element. As a result, the bottom of each section will be smooth rather than uneven, which means that succeeding content will not get enjambed.

(To add another class to an element that already has one, put it inside the ” ” and separate the classes with spaces).

 <section class="artist-models cf">

Once we clearfix the three sections, our layout should look like this.

Your Remaining Tasks: Add and Style More Content

Please download the final layout screenshots.

Open them up in Preview or some other PDF reader and view them at actual size.

Note the additional content in the screenshot. Please add it in. The image is of a Gibson ES-175, which you can find in the images folder.  The h3 that goes with the image says Featured and the paragraph below that says:

It’s not a Les Paul, and we’re a Les Paul site, but this Gibson ES-175 is so gorgeous that we decided to feature it anyway.

Beside that (in the Desktop view) is a form entitled Contact The Editors, with fields for First Name, Last Name, Email, and Comments.

I’ll give you the code for the form:

<section class="subscribe">

  <h4>Contact The Editors</h4>

  <form action="#" method="post"> 

    <label for="firstname">First Name</label>
    <input type = "text" class="firstname" id="firstname">

    <label for="firstname">Last Name</label>
    <input type = "text" class="lastname" id="lastname">	

     <label for="email">Email</label>
     <input type="email" class="email" id="email">

     <label for="comments">Comments</label>
     <textarea id="comments" class="comments"></textarea>

     <input type="submit">


You figure out how to style the form. Hint: the display property is very useful here.

Please finish the page layout, getting it as close as possible to those shown in the downloaded screenshots, and then show your page to me.

About the Viewport Meta Tag

The Viewport Meta Tag, which we added when we got the HTML from HTMLShell.com, tells mobile browsers not to scale the page down.

First making sure that the meta tag is in your code, test your page in the Apple mobile simulator. Or test it on your phone by uploading it to webspace and then going to that URL on your phone.

Comment out the viewport meta tag line and then test it again in the mobile simulator or on an actual phone.

Doing this will show how mobile browsers scale pages without viewport meta tags, assuming that they were built without a responsive strategy (as practically all pages were built before the advent of smart phones).

In essence, when you use the viewport meta tag, you tell the mobile browser that you have in fact taken its dimensions into account in your design.

From the Mozilla Developers Network, more information on why the viewport meta tag is required.

Guitar images © Gibson Brands. Used with permission.