Exercise » Gallery X (Create a Responsive Layout)

Without a responsive layout, text gets too small to read on small devices.

If a reader increases the page size on their phone (or makes the browser window smaller on a desktop), text gets cuts off… forcing the reader to scroll back and forth to read.

non-responsive structure

Left: a non-responsive site is too small to read on my iPhone. Right: when I zoom in to read, the text gets cut off.

Text should be readable on various devices and browser windows. Creating a responsive layout helps.

What is a Responsive Layout?

A responsive layout is a mix of an adaptive layout and a fluid layout.

An adaptive page has multiple grids (often one for each popular browser width) which are accessed based on the size of the browser. Adaptive grids can be problematic, because there are many browser widths that need to be designed for (including widths that don’t exist yet).

A fluid page provides a single grid, created in percentages, so the page expands as the browser expands and contracts as the browser contracts. Fluid grids can be problematic, because columns get too wide on large browsers and too narrow on small browsers.

A responsive page expands as the browser expands and contracts as the browser contracts (like a fluid grid), but has what we call breakpoints — alternative layouts (like an adaptive grid) based on when the design “breaks” and needs to be reconfigured. By using breakpoints, a responsive grid works on all browser widths, and avoids columns that are too wide or too narrow.

If you are new to responsive layouts, liquidapsive.com is a great visual resource for experiencing the different kinds of grids explained above.

Design and Build Mobile First

When working with responsive layouts, design and build mobile first.

Designing mobile first forces you to consider what needs to be clear and available for mobile users. What content is essential? What needs to be at the “top” of the screen? What can be hidden under links? What can be put lower on the pages?

Designing mobile first means understanding the content as well as understanding the reader—what they need, how they will approach and use the site, and so on.

Designing mobile first also gives you and your clients the chance to think about responsive design as an opportunity to add content as pages expand — rather than thinking of it as cutting content as pages get smaller.

For example, let’s say you’re designing a website for the city library. The library is part of the community, and wants its site to communicate all the rich programming available for people of all ages. That’s great.

But someone out running errands might use their phone to check the library hours, the address of a branch they don’t go to often, the time of an event they’re heading to, and maybe the catalog to see if a book is available. Someone using their phone on the run doesn’t want to wait for lots of pictures of the community participating in library activities to load. This additional level of content can be built in as the browser gets bigger.

Building for mobile first also means you build the “small screen” (think phone) layout first.  Then you use media queries to increase size and complexity of the layout as the devices get bigger.

Building mobile first helps readers who use old phones that don’t recognize media queries. Since the design starts with layout for small screens, no media queries are needed for old phones to get the layout for small screens.

Unfortunately, Internet Explorer 8 and earlier does not support media queries either. So when you build mobile first, the people who use IE8 (think businesses and other countries other than the US) get the small (mobile) design… which wouldn’t be horrible, but the mobile design (single column) then expands to fill up the desktop browser and the line-length becomes impossibly long to read.

The fix is to design mobile first, and add some code to work with IE8. You’ll do that in this lesson.

Overview of the Assignment

In this lesson, you will build a responsive layout with some content for an imaginary gallery called Gallery X.

  1. Build a responsive layout (1-, 2-, and 3-columns) using max-width, the universal selector (*), %, multiple divs, the float property, and media queries.
  2. Re-use properties you used earlier (h1, h2, p, .intro, em)
  3. Experiment with margin and padding.
  4. Add two kinds of images: content and decoration.
  5. Style your the “X” in your h1 so it looks different from “Gallery”

mock-ups-galleryx-final

Getting Started

Create a Folder

In the web_typography_yourlastname folder, create a folder for the lesson. Call it responsive_layout.

Start the HTML File

In your text editor, create a new document, and save it as index.html in your responsive_layout folder.

Add the Basic HTML Syntax, Title, and Link to the CSS File

As usual, you can type it in… or you can copy it from a previous assignment and make changes as needed. Don’t forget to change the page title and CSS file name!

<!DOCTYPE html> 
<html>
 
<head> 
<title>Responsive Layout</title> 
<meta charset="utf-8"> 
<link href="responsive_layout.css" rel="stylesheet" type="text/css">
</head> 
 
<body>
  
</body> 
</html>

Start Your Responsive Layout

You will need four divs. The main container + three columns. The three columns will respond to browser size, moving around as needed, like this:

mock-ups-galleryx

Put the divs in Your HTML File

The main_container lives in the body (as usual) and the three other divs all live in the main_container, like this:

<body>
  <div id="main_container">
     <div id="intro_column"></div>
     <div id="current_column"></div>
     <div id="coming_soon_column"></div>
  </div>
</body>

Style the divs in Your CSS File

To make your columns respond to the width of your browser, you need to stop setting widths in pixels and start setting them in percentages.

The only div that will use pixels to set a max-width (e.g., this is the widest the main_container should ever get) is the main_container. Set the other divs to 90% width.

#main_container{
  max-width:1400px;
  }

#intro_column{
  width:90%;
  }

#current_column{
  width:90%;
  }

#coming_soon_column{
  width:90%;
  }

Save and View Your Page

All you should see is a blank page. Why? You haven’t put any content in yet.

Add Some Content and Background Colors

In each column, put a word that represents the content of the column (words in bold):

<body>
  <div id="main_container">
     <div id="intro_column">Intro</div>
     <div id="current_column">Current</div>
     <div id="coming_soon_column">Coming Soon</div>
  </div>
</body

To see the column each word lives in, add some background colors to the divs (new syntax in bold):

#main_container{
  max-width:1400px;
  background-color:#FFFF99;
  }

#intro_column{
  width:90%;
  background-color:#F08275;
  }

#current_column{
  width:90%;
  background-color:#8CC9D9;
  }

#coming_soon_column{
  width:90%;
  background-color:#E6D9F2;
  }

Save and View Your Page

You should now see the three divs, in a column, at the left edge of the page. Each div has it’s own color band like this:

responsive-1

Narrow your browser window so it’s similar to the size of a phone or other handheld device. The main container responds to the size of the browser. And the three other divs react  accordingly, remaining 90% the size of the main container.

Adjust the Mobile Layout

Always build mobile first. Since the mobile version will be a single column down the page (and the columns already do that by default), all you need to do is set the width of your columns, set the space inside (padding) them, and set the space around (margin) them.

iphone-final

Before you start controlling margins and padding, it’s a good idea to clear out all the default margins and padding!

Use the Universal Selector to Clear Margins and Padding

From now on, whenever you start a project, Clear all margins and padding to 0 so you can add space only where you want it.

Use the CSS universal selector. It applies a value to all properties in all elements in the HTML document. It’s represented by an asterisk (*).

To set all margins and padding to 0 using the universal selector, add it at the top of your CSS document, as follows:

*{
 margin: 0px;
 padding: 0px;
 }

All margins and padding—for all classes, divs, and tags (h1, h2, p, em, strong, and so on)—are now set to 0. This gives you complete control of the spaces between elements. You can add back exactly the amount of space you want—only where you want it.

Save and View Your Page

Notice your divs and text no longer have space around them:

responsive-2

Determine What Changes the Layout Needs

  1. The three columns need to be sized and spaced so you can see main_container (currently yellow) all the away around them.
  2. The text needs to have some space around it, so it’s not right up against the edge of the column. (Note: it’s not wrong to have text up against the edge of a div, but design requires space between the two.)

Add Space Around the Columns

To add space around (or outside) an element, use margin. In a responsive layout, use percentages (%) on left and right measurements—so they change as the browser width changes. Use px on top and bottom measurements.

Add margins to your three columns like so (new syntax in bold):

#main_container{
  max-width:1400px;
  background-color:#FFFF99;
  }

#intro_column{
  width:90%;
  margin-left:2%;
  margin-top:5px;
  margin-bottom:5px;
  background-color:#F08275;
  }

#current_column{
  width:90%;
  margin-left:2%;
  margin-top:5px;
  margin-bottom:5px;
  background-color:#8CC9D9;
  }

#coming_soon_column{
  width:90%;
  margin-left:2%;
  margin-top:5px;
  margin-bottom:5px;
  background-color:#E6D9F2;
  }

Notice I don’t have you add a margin-right on any of the columns. That’s correct. I’ll show why later.

Save and View Your Page

The columns now have space around them:

responsive-3

There are, however, two problems. First, the space above your intro_column may be white. This is a glitch in some browsers. If you add a margin-top to the first element in the main_container, the space is visually added above the main_container, not inside it.

Second, there may not be any yellow below the coming_soon_column. Again, this is a glitch in some browsers. The main_container ignores the bottom margin of the last element.

To fix these problems, use top and bottom padding inside the main_container instead. Remove the top margin from the intro_column and the bottom margin from the coming_soon_column. Why? because once you add the padding, the browsers will suddenly recognize the margins, and the space will double.

I know. It doesn’t make sense. It’s a glitch. To fix it, replace the margins with padding like this (new syntax in bold):

#main_container{
  max-width:1400px;
  padding-top:5px;
  padding-bottom:5px;
  background-color:#FFFF99;
  }

#intro_column{
  width:90%;
  margin-left:2%;
  margin-top:5px;
  margin-bottom:5px;
  background-color:#F08275;
  }

#current_column{
  width:90%;
  margin-left:2%;
  margin-top:5px;
  margin-bottom:5px;
  background-color:#8CC9D9;
  }

#coming_soon_column{
  width:90%;
  margin-left:2%;
  margin-top:5px;
  margin-bottom:5px;
  background-color:#E6D9F2;
  }

Save and View Your Page

The space around the three columns is much better:

responsive-4

Add Space Inside the Columns

In this design, the text should not touch the edge of the div. To add space inside an element, use padding (new syntax in bold):

#main_container{
  max-width:1400px;
  padding-top:5px;
  padding-bottom:5px;
  background-color:#FFFF99;
  }

#intro_column{
  width:90%;
  margin-left:2%;
  margin-bottom:5px;
  padding-left:3%;
  padding-top:8px;
  padding-right:3%;
  padding-bottom:8px;
  background-color:#F08275;
  }

#current_column{
  width:90%;
  margin-left:2%;
  margin-top:5px;
  margin-bottom:5px;
  padding-left:3%;
  padding-top:8px;
  padding-right:3%;
  padding-bottom:8px;
  background-color:#8CC9D9;
  }

#coming_soon_column{
  width:90%;
  margin-left:2%;
  margin-top:5px;
  padding-left:3%;
  padding-top:8px;
  padding-right:3%;
  padding-bottom:8px;
  background-color:#E6D9F2;
  }

Save and View Your Page

The space inside the three columns is what we want for this design. The text no longer touches the edge of the div:

responsive-5

The left and right margins now look equal. Even though I did not have you put any right margin on the columns. Why? Add the all the horizontal measurements you’ve specified on the three columns to see the answer.

Left margin (2%) + left padding (3%) + width (90%) + right padding (3%) = 98%.

That leaves a 2% “extra” space to the right of the columns. I always recommend using an “extra” space instead of setting both left and right margins. It keeps your layout flexible. Percentages are not the same as pixels and cannot be controlled with the same amount of precision.

Create Your First Breakpoint

You’re going to put text and images into these columns. The 90% wide columns are fine for a phone, but are far too wide for a larger screen.

When the columns get too wide to comfortably read information, the layout should change, and look like this:

ipad-final

Determine Where Your Breakpoint Should/Might Be

It’s hard to tell exactly where this layout change should happen. But you can estimate it. The next larger layout has two columns side-by-side. Estimate the point where you think two columns might work—not so narrow that text won’t have enough room in the current_column and coming_soon_column, but not too wide for the text in the intro_column.

responsive-6

Then take a screenshot of the browser window and measure the width. I’m going to set my first breakpoint at 590px. This is an estimate! I might need to change it later.

Add a Media Query in the CSS

Media queries are new to CSS3. They basically say to the CSS, “hey, pay attention to the media this page is being used on… and act accordingly.”

You can use a media query to tell the CSS to notice the browser width.

At the bottom of the CSS file, type in the following syntax (I’m using 590px, if you’ve estimated a different width, use your measurement):

@media (min-width: 590px) {
 }

What does this mean? The syntax says, “pay attention to the media, if the width of the browser is equal to or more than 590px, do this.”

Except it doesn’t actually do anything yet. Because you haven’t told it what to do.

Tell the Media Query What To Do

What do you want to do on browsers equal to or larger than 590px? You want to:

  1. Make the current_column and coming_soon_column turn into a two column layout.

Thus, the two elements you’ll be changing in the media query are the current_column and the coming_soon_column. Copy and paste those columns inside the media query like so (new syntax in bold):

@media (min-width: 590px) {
  #current_column{
    width:90%;
    margin-left:2%;
    margin-top:5px;
    margin-bottom:5px;
    padding-left:3%;
    padding-top:8px;
    padding-right:3%;
    padding-bottom:8px;
    background-color:#8CC9D9;
    }

  #coming_soon_column{
    width:90%;
    margin-left:2%;
    margin-top:5px;
    padding-left:3%;
    padding-top:8px;
    padding-right:3%;
    padding-bottom:8px;
    background-color:#E6D9F2;
    }
}

There are two closing curly brackets at the end. This is correct! One closes the coming soon column div, the other closes the media query.

Be Specific

Since media queries can over-ride earlier styling, be specific about what you want the Media Query to change. In this instance, you want the width of the two columns to change. Delete all the other styling and change the widths (new syntax in bold):

@media (min-width: 590px) {
  #current_column{
    width:45%;
    }

  #coming_soon_column{
    width:45%;
    }
}

This tells browsers: if you are larger than 590px, make the current_column and the coming_soon_column 45% the width of the main_container.

Save and View Your Page

The current_column and the coming_soon_column are now narrower:

responsive-7

Notice the two columns are narrower not just at the breakpoint, but on browsers larger than the breakpoint! The desktop view has also changed. Meanwhile, the phone view remains the same. This is good.

But there is a problem. The two columns should be side-by-side. They’re not.

Place the Columns Side-by-Side with the Float Property

By default, divs are block elements—they create a break (a new line) for each one. They show up as a single column of elements.

But you don’t always want a single column of elements. For example, in this layout, you want two columns to live side-by-side.

To fix this, use the float property. You can tell an element to float left or right. For now, use a float:left.

In your 590px media query, add the line float:left; to both the current_column and coming_soon_column, like so (new syntax in bold):

@media (min-width: 590px) {
  #current_column{
    width:45%;
    float:left;
    }

  #coming_soon_column{
    width:45%;
    float:left;
    }
}

Save and View Your Page

When you added the floats, two problems emerged.

responsive-8

Problem 1: the main_container (yellow) is no longer surrounding the current_column or the coming_soon_column. This is another oddity of HTML. When an element inside another element is set to “float,” the element containing the floated element no longer recognizes it.

So, since the columns were set to “float” the main_container no longer recognizes them. The main_container by default has an auto height, and stops after intro_column.

To fix this, add a main_container element in your 590px media query, and add the line overflow:hidden; (new sytax in bold):

@media (min-width: 590px) {
  #main_container{
    overflow:hidden;
    }

  #current_column{
    width:45%;
    float:left;
    }

  #coming_soon_column{
    width:45%;
    float:left;
    }
}

This tells the main_container to look more carefully at what is inside it. It will recognize the floated elements and open back up to include them.

Problem 2: the float didn’t work. That’s because the two columns don’t fit on one line.

Left margin (2%) + left padding (3%) + width (45%) + right padding (3%) + left margin (2%) + left padding (3%) + width (45%) + right padding (3%) = 106%

If the total % goes above 100%, the last element in the row will bop down to start a new row. To fix this, change the widths of the two columns so the total is again 98%:

@media (min-width: 590px) {
  #main_container{
    overflow:hidden;
    }

  #current_column{
    width:41%;
    float:left;
    }

  #coming_soon_column{
    width:41%;
    float:left;
    }
}

Save and View Your Page

responsive-9

Everything works! If you want to learn more about floats, Chris Coyner provides a simple, yet thorough explanation at All About Floats.

Create Your Second Breakpoint

For larger browsers, this design should have a three-column layout.

laptop-final

Determine Where Your Breakpoint Should/Might Be

Again, it’s hard to tell exactly where this layout change should happen. But you can estimate it. The largest layout has three columns side-by-side. Estimate the point where you think three columns might work—not so narrow that text won’t have enough room.

responsive-10

I’m going to set my next breakpoint at 935px. Again, this is an estimate! I might need to change it later.

Add Another Media Query in the CSS

Media queries must go from smallest to largest in the CSS file. In addition, they should be separate from each other. Make sure you do not put a media query inside another media query. At the bottom of the CSS file, add the larger media query (I’m using 935px, if you’ve estimated a different width, use your measurement):

@media (min-width: 935px) {
 }

Tell the Media Query What To Do

What do you want to do on browsers equal to or larger than 935px? You want to:

  1. Make all three columns, intro_column, current_column and coming_soon_column, turn into a three column layout.

To do this, you need to add a float:left; to the intro_column, and change the width of all the columns so they fit on one row (new syntax in bold):

@media (min-width: 935px) {
  #intro_column{
    float:left;
    width:25%;
    }

  #current_column{
    width:25%;
    }

  #coming_soon_column{
    width:25%;
    }
}

Notice the syntax above is specific. Only add or change what needs to be added or changed. Do not repeat previous styling in multiple media queries.

Save and View Your Page

When you added the floats, two new problems emerged.

responsive-11

Problem 1: the current_column and the coming_soon_column look lower than the intro_column. That’s because there is top padding on the main_container, plus a top margin on both the current_column and the coming_soon_column.

To fix this, set the top margin on the current_column and the coming_soon_column to 0 (new sytax in bold):

@media (min-width: 935px) {
  #intro_column{
    float:left;
    width:25%;
    }

  #current_column{
    width:25%;
    margin-top:0;
    }

  #coming_soon_column{
    width:25%;
    margin-top:0;
    }
}

This tells the main_container to look more carefully at what is inside it. It will recognize the floated elements and open back up to include them.

Problem 2: The three columns don’t look centered in the main_container. That’s because of the measurements.

Left margin (2%) + left padding (3%) + width (25%) + right padding (3%) + left margin (2%) + left padding (3%) + width (25%) + right padding (3%) + left margin (2%) + left padding (3%) + width (25%) + right padding (3%) = 99%

There is a 2% left margin along the left edge, but only 1% space left along the right edge.

Dividing 100% by 3 columns does not work. There are no such things as fractions of pixels. There will always be one extra pixel that doesn’t cooperate. I recommend hiding the pixel in one of the columns.

Since the intro_column has a different kind of information than the other two columns, I’m going to try fixing this problem by making the intro_column 1% smaller than the other two columns. This will leave 2% of space on the right side of the main_container. I might need to change this later, but it’s a good place to start.

@media (min-width: 935px) {
  #intro_column{
    float:left;
    width:24%;
    }

  #current_column{
    width:25%;
    margin-top:0;
    }

  #coming_soon_column{
    width:25%;
    margin-top:0;
    }
}

Save and View Your Page

responsive-12

The two problems are fixed! But another one I didn’t notice before stands out.

Problem: the amount of main_container (yellow) showing at the bottom of the columns is bigger than the amount showing at the top. That’s because there is bottom padding on the main_container, plus a bottom margin on both the intro_column and the current_column.

If you look at your browser, you’ll see the problem started when the design changed to a two-column layout. The correct way to fix this problem is to:

  1. go back to your middle media query (mine is 590px) and change the margin-bottom of the current_column to 0. That will fix the problem in the two-column layout.
  2. in your largest media query (mine is 935px) change the margin-bottom of the intro_column to 0. This will fix the problem for the three-column layout.

Make the above two changes on your own.

Add Content

Now that you have a basic flexible layout, add content (.doc) into the columns. The word document tells you what content to put in each column.

A reminder: content goes in the HTML document. And each column is defined by a pair of div tags. Simply replace the words currently being used as placeholders:

  <div id="intro_column">Replace the word "intro" with content.</div>
  <div id="current_column">Replace the word "current" with content.</div>
  <div id="coming_soon_column">Replace the words "coming soon" with content.</div>

Save and View Your Page

All three layouts with content in the columns.

responsive-13

Define the Content

These next few steps are a repeat of previously used skills. Do them on your own.

In the HTML:

  1. Make “Gallery X” your h1
  2. Make “Current Exhibition” and “Coming Soon” h2
  3. Make “The Lindisfarne Gospels” and “Filippo Tommaso Marinetti” h3
  4. Make the paragraphs of text and the dates/place info all p

While you’re at it, in the CSS:

  1. Change the columns to a light gray and the main_container to white (hint: since the columns and main_container colors should be the same on every browser size, style them at the top of the CSS page… in the mobile design area… before the first media query).

Save and View Your Page

responsive-14

Style the Content

These next few steps are also a repeat of previously used skills. Do them on your own.

In the CSS:

  1. Style your h1 the way you want it to look.
  2. Style your h2 the way you want it to look.
  3. Style your h3 the way you want it to look.
  4. style your p the way you want it to look.

For example, here’s how I styled my elements. (You can do them the same way, or you can do them differently if you want to!)

  • My h1 is verdana, normal weight, 40px on 66px line-height.
  • My h2 is verdana, bold, 15px on 44px line-height, all caps, with 1px letterspacing.
  • My h3 is georgia, italic, normal weight, 20px on 24px line-height.
  • My p is georgia, 16px on 22px line-height.

Save and View Your Page

Here’s how my layouts look.

responsive-15

There are a lot of changes I’d like to make. But first I’ll put the images in so I have all the content in place.

Adding Images (Content)

Two images belong in this web page. They are part of the content and will be added in the HTML page.

Get the Images

First, download the Lindisfarne Gospels image and the Filippo Tommaso Marinetti image.

Save the Images in an Images Folder

Inside the responsive_layout folder, create an images folder. Save the two images there.

Add the Images in the HTML File

In this design, the images go just above the name of the exhibitions. Thus, you need to add them just before the names of the exhibitions in the HTML (new syntax in bold):

<h2>Current Exhibition</h2>
<img src="images/lindisfarne_gospels.jpg">
<h3>The Lindisfarne Gospels</h3>
...
<h2>Coming Soon</h2>
<img src="images/zang_tumb_tumb.png">
<h3>Filippo Tommaso Marinetti</h3>

What does this mean? img src= means insert the following image source. “images/lindisfarne_gospels.jpg” means use the file called lindisfarne_gospels.jpg inside the folder called images. (Whenever you use a slash, you’re telling the browser to go inside a folder.)

Save and View Your Page

Well that’s not right!

responsive-16

The images are way too big, and break out of their divs! Why? Because the images have been placed at their full size into a responsive layout.

Make the Images Responsive

There is more than one way to make an image responsive. For this exercise, you will use the quickest, easiest method. This is not always the best approach, because it loads large images (and larger amounts of data) then shrinks the images down to size as needed. This can cause web pages to load more slowly on phones.

But it is the easiest way to do it. So you’ll start with this method.

In the CSS file, add this syntax so it works at all sizes (e.g., before the first media query):

img{
    width:100%;
    }

What does this mean? img means “style all images this way.” width:100%; means “make the width 100% the width of the space available in the div.”

Save and View Your Page

The images now fit properly in the columns.

responsive-17

It’s time to look at each layout and make changes as needed.

Look Closely at the Mobile View

What Do You Need to Fix?

responsive-18

There are some problems that need to be fixed.

  1. There isn’t any space between the paragraphs
  2. The name of the exhibitions is getting lost, because it’s crammed in between the image and the date.
  3. I think the intro paragraph should look different from the other text.
  4. The narrow column width is creating a terrible ragged edge on the text about the Lindisfarne Gospels.
  5. The text in every column feels too close to the bottom edge (too close to the white line).

Add Space Between Paragraphs

You’ve been adding space between the columns using margin and padding. You can use those same properties to add space to the paragraphs. I usually add a margin-bottom to add space. You can use padding if you prefer.

I added 8px of space like so (new syntax in bold):

p{
    font-family:georgia;
    font-size:16px;
    line-height:22px;
    margin-bottom: 8px;
}

Add Space Around the Exhibition Names (h3)

You can add space around a text element one of two ways: increasing the line-height, or adding margin/padding above and below. Increasing the line-height adds equal amount of space above and below the element. I want to add a bit more space above the h3 than below it. So I’m going to use margin-top and margin-bottom instead (new syntax in bold):

h3{
    font-family: georgia;
    font-size:20px;
    line-height:24px;
    font-style:italic;
    font-weight:normal;
    margin-top:12px;
    margin-bottom:4px;
}

Make the Intro Paragraph Look Different

You’ve already used this skill in the bibliography. Use it again here, on your own. I made my intro paragraph 17px on 24px line-height, italic, dark gray.

Adjust Columns to Fix Ragged Edge

There is a very ragged edge in the text. This happens when a column is too narrow for the text inside it. One solution would be to make the column a little bigger. For example, you don’t have to keep the left and right margins. It’s better to have the text fit more comfortably in the space than have white lines along the left and right edges of the page.

Try changing all three columns (intro, current, coming_soon) so they are 2% wider and no longer have margin to the left and right. For example, here are the changes to the intro_column (reminder: the right margin was created by leaving extra space):

#intro_column{
    width:92%;
    margin-left:0%;
    margin-bottom:5px;
    padding-left:4%;
    padding-top:8px;
    padding-right:4%;
    padding-bottom:8px;
    background-color:#dddddd;
 }

Add Space Inside the Bottom of Each Column

You’ve already have space inside the bottom of each column. It’s called padding-bottom. Increase the measurement until it looks right to you. I needed to double my padding to 16px.

Save and View Your Page

It looks so much better!

responsive-19

The only problem now is that the date and place for the exhibitions feel too far away from each other. In fact, the place (Harrington Hall) is floating all by itself. 

Using the Break (br) Tag

When two or more lines of text belong together (e.g., lines of a poem) but need to break in a specific place, you can use the break tag. Break tags should be used sparingly, only when the break is meaningful, and never to fix a ragged edge of text.

When using the break tag, the two lines need to be in the same paragraph, like this:

<p>Through April 16, 2017<br></p>
<p>Harrington Hall</p>

Save and View Your Page

It looks so much better!

responsive-20

The mobile layout of the page it done. But you’ve made a lot of changes. It’s time to see how those changes effected the two- and three-column layouts.

Look Closely at the Two-Column Layout

What Do You Need to Fix?

responsive-21

There are two problems that need to be fixed.

  1. The use of white spaces (main_container) showing around the gray is inconsistent.
  2. There is a widow (a single word) at the end of the intro paragraph.

Add White Spaces Back in with Margins

You got rid of some of the white margins in the mobile view. This affected the 2-column layout. To fix this, you need to add white space back in at the two-column breakpoint.

I did a little testing, and to make all the white margins fairly equal around the boxes, I set left margins back to 2%, then adjusted the widths of columns accordingly.This added white vertical space.

I also added a bit more padding-top and padding-bottom on the main_container and margin-bottom on the intro_column. This added white horizontal space.

My final CSS for my two-column breakpoint looks like this (changes in bold):

@media (min-width: 590px) {
  #main_container{
    overflow:hidden;
    padding-top:10px;
    padding-bottom:10px;
    }

  #intro_column{
    width:88%;
    margin-left:2%;
    margin-bottom:10px;
    }

  #current_column{
    margin-left:2%;
    width:39%;
    float:left;
    margin-top:0;
    margin-bottom:0;
    }

  #coming_soon_column{
    margin-left:2%;
    width:39%;
    float:left;
    margin-top:0;
    }
}

That’s a lot of new CSS! Why so many changes? The two-column layout used to get some of its styling from the mobile view layout. When the styling was changed in the mobile view, those styling changes needed to be “over-written” again in the two-column layout.

Here’s a breakdown of the changes and what they mean:

  #main_container{
    overflow:hidden;
    padding-top:10px;
    padding-bottom:10px;
    }

Now that there are larger vertical white spaces, there should be larger horizontal white spaces. The padding top and bottom have been increased to 10px.

 #intro_column{
    width:88%;
    margin-left:2%;
    margin-bottom:10px;
    }

The intro column used to be the same size in mobile view and the two-column layout. You made it larger in mobile view, so now you need to reduce the size here. The margin-left and larger margin-bottom increase the amount of white space around the div.

#current_column{
    margin-left:2%;
    width:39%;
    float:left;
    margin-top:0;
    margin-bottom:0;
    }

  #coming_soon_column{
    margin-left:2%;
    width:39%;
    float:left;
    margin-top:0;
    }

Again, you need to add vertical white space to the columns. This effected the width of the columns, so that changed too. In addition, now that both columns tuck up under the intro_column, the horizontal white space between them is created with a single margin-bottom on the intro_column. Setting top and bottom margins to 0 here just cleans up the layout.

Save and View Your Page

It looks so much better! In fact, putting the white spaces back in even got rid of the widow in the intro paragraph.

responsive-22

There is, however, a problem. You can’t see it here, but when this layout is wider (but still two-column) the vertical white spaces grow (because they are set using %) while the horizontal white spaces do not change (because they are set using px).

responsive-23

Using Viewport Width as a Unit of Measurement

Personally, I don’t mind if the white spaces aren’t a perfect match. If it bothers you, there is another unit of measurement you can use to set the horizontal white spaces.

1vw = 1/100 of the viewport (e.g., browser) width

Or, to put it another way, 1vw = 1% of the browser width.

Theoretically (I say theoretically, because I don’t use this measurement often and cannot promise it doesn’t have glitches), you can set your bottom and top margins and padding using vw, and the vw will match the % used for left and right margins and padding.

Thus, you would make the following changes:

@media (min-width: 590px) {
  #main_container{
    overflow:hidden;
    padding-top:2vw;
    padding-bottom:2vw;
    }

  #intro_column{
    width:88%;
    margin-left:2%;
    margin-bottom:2vw;
    }

  #current_column{
    margin-left:2%;
    width:39%;
    float:left;
    margin-top:0;
    margin-bottom:0;
    }

  #coming_soon_column{
    margin-left:2%;
    width:39%;
    float:left;
    margin-top:0;
    }
}

Save and View Your Page

The 2vw and 2% spaces are equal.

responsive-24

Look Closely at the Three-Column Layout

What Do You Need to Fix?

responsive-25

There are three problems that need to be fixed.

  1. The three columns no longer fit in one row.
  2. The gray space inside the columns (padding) feels too wide.
  3. For some reason, the top white horizontal space is narrow again.

Fix the Left and Right Padding

You set the left and right padding in the mobile view. Those measurements look too big in a 3-column layout (because the browser is wider, the padding gets wider).  To fix this, you need to change the padding at the 3-column breakpoint.

I did a little testing, and found I prefer to use 2% padding on the left and right of each column. The padding matches the margins, which I enjoy. When I made the padding smaller, all three columns fit with space left over. So I went ahead and increased the width of the columns too.

My final CSS for my three-column breakpoint looks like this (changes in bold):

@media (min-width: 935px) {
    
#intro_column{
    float:left;
    width:26%;
    margin-bottom:0;
    padding-left:2%;
    padding-right:2%;
    }
    
#current_column{
    width:27%;
    margin-top: 0;
    padding-left:2%;
    padding-right:2%;
    }

#coming_soon_column{
    width:27%;
    margin-top: 0;
    padding-left:2%;
    padding-right:2%;
    }
       
 }

Save and View Your Page

It looks so much better! In fact, for some reason my top white space is back to a full 2vw. Don’t know what happened there…

responsive-26

There is, however, a problem. (It doesn’t bother me, but it might bother you.) The columns are not equal. Here’s another view of the page:

responsive-27

Make the Columns Equal Height

If you want to make the columns equal height, there are a couple ways to approach this. One is to use javascript (that’s a whole other subject). Another is to use flexbox (which isn’t officially approved yet).

A third method uses variables you already know how to use: padding, margin, and overflow:hidden.

At the 3-column breakpoint, add a large amount (e.g., 999px) of padding-bottom to all three columns. Then add a negative large amount (e.g. -999px) of margin-bottom to all three columns.

This method only works because the three columns are in another div that is set to overflow:hidden; (thus cutting off the extra column height you just created).

Here’s how my CSS looks (new content in bold):

@media (min-width: 935px) {
    
#intro_column{
    float:left;
    width:26%;
    margin-bottom:0;
    padding-left:2%;
    padding-right:2%;
    padding-bottom:999px;
    margin-bottom:-999px;
    }
    
#current_column{
    width:27%;
    margin-top: 0;
    padding-left:2%;
    padding-right:2%;
    padding-bottom:999px;
    margin-bottom:-999px;
    }

#coming_soon_column{
    width:27%;
    margin-top: 0;
    padding-left:2%;
    padding-right:2%;
    padding-bottom:999px;
    margin-bottom:-999px;
    }
       
 }

And here is the result. Three equal columns.

responsive-28

Look at the Three-Column Layout on a Large Screen

What Do You Need to Fix?

responsive-29

There are two things we can fix.

  1. I prefer the main_container centered in the width of a large browser.
  2. While I prefer the white space around the gray columns (I think it looks crisp, and focuses the visitors attention on the content), you might want to put a background image in the space framing the columns.

Center the main_container

You’ve centered a main_container before (for words and the first bibliography). If you can’t remember how to do it, refer to the CSS cheat sheet!

Add an Image in the Background

The two images you’ve already added are content. You added them in the HTML. A background image is decoration or styling, and is added in the CSS.

You can add a background image to any element. To put one in the background of the entire page, you add it to the body.

  1. Download this background image, and put it in your “images” folder,
  2. Then, in your CSS document, add the following syntax (new syntax in bold):
@media (min-width: 935px){
    
body{
   background-image: url(images/x-gray.png);
    } 

Save and View Your Page

responsive-30

By default, the image repeats across and down the page, creating a background texture. You can control images and how they behave. HTML Dog’s CSS reference has a page about backgrounds, and Chris Coyier at CSS Tricks also explains more about backgrounds.

An another problem emerges. The method you used for making all three columns equal is not working with the 2vw padding-bottom in the main_container. So the bottom white border has disappeared. A quick fix? Add a bottom white border to the main_container!

You’ve added a border to your main_container before. This time, you’ll only add it to the bottom edge of the div.

In your CSS document, add the following syntax (new syntax in bold):

@media (min-width: 935px){
    
body{
   background-image: url(images/x-gray.png);
    } 

#main_container{
   margin-right:auto;
   margin-left:auto;
   border-bottom: 2vw white solid; 
    }

Save and View Your Page

There is now a white border all the way around the columns!

responsive-31

Make the X Look Different from “Gallery”

Now that the structure is responsive, it’s time to make one last change. Make the X stand out by making it bold. One way you could do this is to use the <strong></strong> tags. But sometimes you’re using <strong></strong> for another purpose.

Another method is to create and apply a class. You used a class earlier, but applied it to an entire paragraph. It is also possible to apply a class to a specific sentence, word, or letter using the <span></span> tag.

Here’s what the HTML looks like (new syntax in bold):

<h1>Gallery <span class="x">X</span></h1>

Basically, you add the <span></span> tags around the element(s) you want to style, then add the class to the opening <span> tag (the same way you added it to the <p> tag for the intro paragraph).

The CSS works the same as the other classes you’ve created:

.x{
   font-weight:bold;
   font-size: 48px;
   }

Only specify what you’re changing about the element. For example, my “X” is bold and 8px bigger than the rest of the h1. So I only set the weight and size.

Save and View Your Page

responsive-32

You’re almost done! It looks great, but you need to take care of some behind-the-scenes tasks.

Make it Work Cross Browser

You can’t tell by looking at the responsive screen on your laptop, but this is not going to work on an iPhone. Nor will it work on Internet Explorer 6–8. Not yet anyway.

Tell Devices to Look at their Viewport Size

Some mobile devices will show a webpage at its largest size regardless of media queries.

Why? Since most sites are not yet optimized for mobile, some modern mobile browsers are purposely set to a larger viewport — meaning they act as if their browser is larger than it actually is. This way, readers see the entire page (just really small) and can pinch-to-zoom to see the content they want to read. Theoretically, this is better than only seeing a portion of a web page when it loads.

Since your responsive layout is optimized for mobile browsers, you can use the viewport meta tag to tell browsers to use their real device width for the viewport.

Put the viewport meta tag into the head of your HTML document. If you are using Google fonts, make sure your Google font link remains first in the head element. To keep things clean, I like to put my meta tags near each other. My syntax looks like this:

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>Responsive Layout</title>
 <link href="responsive_layout.css" rel="stylesheet" type="text/css">
 </head>

Add respond.min.js for IE 6–8

Respond..minjs is a script that doesn’t take long to load, and is written to fix a very specific problem: it translates min-width and max-width media queries and all media types to non-supporting browsers.

The suffix (js) means the script is written in javascript. You don’t need to know how to write javascript, you only need to know how to use specific (respected, bug-free) scripts that have been written by others.

To add respond.min.js to your page…

  1. Go to https://github.com/scottjehl/Respond
  2. Click “clone or download” button
  3. Choose to download the zip file
  4. Unarchive the zip file on your computer
  5. Inside your responsive_layout folder, create a folder called scripts
  6. Put the file “respond.min.js” in the scripts folder
  7. Add the following syntax in the head of your HTML document immediately after your link to your CSS file. (Scripts should go after stylesheets in your head.)
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>Responsive Layout</title>
 <link href="responsive_layout.css" rel="stylesheet" type="text/css">
 <!--[if lt IE 9]>
 <script type="text/javascript" src="scripts/respond.min.js">
 </script>
 <![endif]-->
 </head>

What does this mean?

The first line is a conditional comment. Only Internet Explorer pays attention to conditional comments. This one says: if the browser is less than IE9.

The second line “calls for” or “links to” the script. It says:  find the javascript file named respond-min.js in the scripts folder, and use it. By including scripts/ in the source file path (src), the browser knows to “look” in the scripts folder for the .js file.

The last line ends the conditional comment.

That’s it.

Notes on Media Queries

Media queries can be used to change images, color, spacing, fonts, and so on.

They can get pretty complex. You can have multiple queries that fix problems at multiple breakpoints.

Someday, when you have multiple media queries, you can put each one in its own CSS file and link to multiple CSS files. For now, there’s no need to do that, just keep your media queries in your main CSS file. Always work from smallest (mobile, no need to use that @media syntax) to largest. That way, media queries will correctly over-write the elements you want to over-write.

The number one thing to remember about media queries is that they don’t have to query a specific kind of device. Don’t worry about targeting phones, tablets, and certain laptops. The best way to use media queries is to target breakpoints in a design. If the design shifts when it needs to, it will work at all browser sizes.

Notes on Pixels Instead of ems

The trick to creating a responsive grid is using responsive measurements for the horizontal widths in your layout. Percentages are responsive, and will give you the flexibility you need for your column widths.

Because readers scroll through content, vertical measurements don’t always require the same level of responsiveness (and if they do, try using vw instead of pixels). Text can change as needed at the break-points, and doesn’t have to be responsive either. Thus, wherever you don’t need to use percentages, you’ll use pixels in the lessons for this book.

Some web designers use ems instead of pixels. If you are not familiar with what an em is in web design, an em is a unit of measurement usually equal to the base size of the text (the default base size is 16px).

Working with ems can be a good thing. They allow a design to remain consistent even if a reader chooses a larger base-size for their text. Working with ems is also complex. For creatures with 10 fingers, thinking in base-16 is a mathematical challenge. In addition, due to the “cascading” nature of CSS, the base measurement of an em isn’t always 16px; it changes based on font-sizes used within a layout.

So using ems correctly means understanding child relationships in CSS. And if you’re just learning how to think like a typographer in CSS, you don’t need to be learning the basics… while wrapping your head around an intermediate to advanced understanding of the CSS system… while doing a lot of division.

So in this book, you’ll use pixels and percentages. Later, if you want to learn how to use ems, you’ll have a solid foundation on which to build your knowledge.

Recommended Resources