Contents  >

Responsive Web Design and Media Queries

IBAT Next Course

Learning Goals

At the end of this Lesson you will be able to:

You can view a finished version of this project by clicking the image below.

GitHub image

Contents

About Responsive Web Design (RWD)

Your two work files: base-2.html and base-2.css

RWD: Browser resets

The 768px breakpoint

Editing the web page width in your CSS file

Editing the heading styles in your CSS file

Editing the paragraph style in your CSS file

Viewing your responsive web page at different screen sizes

Updating the <head> of your web page

Validating your web page

Validating your stylesheet

Uploading your two files to GitHub

Further resources

About Responsive Web Design (RWD)

Responsive Web Design (RWD) means using so-called media queries in a CSS file so that the various elements of a web page are displayed appropriately according to the size of the user’s screen.

Typically:

Tutorial RWD: Media Queries

Your two work files: base-2.html and base-2.css

To work with responsive web design in this Lesson, use your text editor to open the following two files from the previous Lesson:

Next, follow these steps:

  1. In the <head> of the base-1.html file, change the title as follows:  
    
    <title>Web page with responsive layout</title>
    
  2. Also in the <head>, change the description as follows:  
    
    <meta name="description" content="A sample web page with a linked stylesheet for responsive layout.">
    
  3. And finally in <head>, change the stylesheet link as follows:  
    	
      <link rel="stylesheet" href="base-2.css">
    
  4. Use the File | Save As command to save the base-1.html file with this new name:   base-2.html
  5. Switch to the base-1.css file, and use the File | Save As command to save the file with this new name:   base-2.css

You are now ready to work with your new web page (base-2.html) and stylesheet (base-2.css) files.

Note the following line in the <head> of your web page.


<meta name="viewport" content="width=device-width, initial-scale=1.0">

This is required for responsive design to work correctly.

RWD: Browser resets

Before continuing, you need to add the following new line to the browser resets section at the top of the base-2.css file:



/* ==== BROWSER RESETS  ==== */
* { padding: 0; margin: 0; border: 0; font-weight: normal; font-size: 16px }

body, html { height: 100% }	

The 768px breakpoint

In responsive web design, a breakpoint is a viewport (screen) width at which the CSS styles rules applied to the web page change. Some complex CSS layouts contain several breakpoints. For example, one for small mobile phones, a second for larger phones, a third for tablets, a fourth for desktops and a fifth for wide-screen laptops.

The simplest case is to use a single breakpoint in your CSS. The common such is 768px, the width of an Apple iPad in horizontal mode. In this case:

In a CSS file, these two media queries, as they are called, are written as shown below.



/* Mobiles */
@media all and (max-width:767px) {
  ...
}

/* Desktop */
@media all and (min-width:768px) {
  ...
}

Tutorial RWD: Media Queries

Editing the web page width in your CSS file

In the previous Lesson, you added an equal amount of ‘white space’ at the left and right edges of the web page. As a result, the content of the web page fills only 60% of the screen.

This is fine for tablet and desktop screens. But it is too narrow for mobiles.

  1. In the base-2.css file, replace the current page width style with the following.
    
    /* ==== PAGE WIDTH  ==== */
    
    /* Mobiles */
    @media all and (max-width:767px) {
        body {
           padding-left: 5%;
           padding-right: 5%
        }
    }
    
    /* Desktop */
    @media all and (min-width:768px) {
        body {
           padding-left: 20%;
           padding-right: 20%
        }
    }
    
    
  2. Save your CSS file.
  3. View the base-2.html web page in your web browser at different screen sizes. You should see that the page content width changes from 90% to 60% as the screen width expands from 767px to 768px.
Tutorial RWD: Media Queries

Editing the heading styles in your CSS file

For all three heading styles in the base-2.css file, you can see that the margins above and below are set in absolute units of pixels. Let's change those values to percentages as shown below.


/* ==== HEADINGS ==== */

h1 {
    font-family: serif;
    font-weight: bold;
    font-size: 40px;
    letter-spacing: -1px;
}


/* Mobiles */
@media all and (max-width:767px) {
    h1 {
       line-height: 1.3;
       margin-top: 12%;
       margin-bottom: 6%;
   }
}

/* Desktop */
@media all and (min-width:768px) {
    h1 {
       line-height: 1.3;
       margin-top: 12%;
       margin-bottom: 10%;
   }
}


h2 {
   font-family: serif;
   font-weight: bold;
   font-size: 32px;
}


/* Mobiles */
@media all and (max-width:767px) {
   h2 {
      line-height: 1.3;
      margin-top: 12%;
      margin-bottom: 3%;
   }
}

/* Desktop */
@media all and (min-width:768px) {
   h2 {
      line-height: 1.3;
      margin-top: 12%;
      margin-bottom: 2%;
   }
}


h3 {
   font-family: serif;
   font-weight: bold;
   font-size: 28px;
}


/* Mobiles */
@media all and (max-width:767px) {
   h3 {
      line-height: 1.3;
      margin-top: 6%;
      margin-bottom: 1%;
   }
}

/* Desktop */
@media all and (min-width:768px) {
   h3 {
      line-height: 1.3;
      margin-top: 5%;
      margin-bottom: 1%;
   }
}

When finished, save your CSS file.

Editing the paragraph style in your CSS file

As with the heading styles, edit the paragraph style to that the bottom margin is expressed as a percentage.


/* ==== PARAGRAPHS ==== */

p {
   font-family: sans-serif;
   font-weight: normal;
   font-size: 16px;
}


/* Mobiles */
@media all and (max-width:767px) {
   p {
      line-height: 1.5;
      margin-bottom: 5%;
   }
}

/* Desktop */
@media all and (min-width:768px) {
   p {
      line-height: 1.6;
      margin-bottom: 2%;
   }
}

When finished, save your CSS file.

Viewing your responsive web page at different screen sizes

To inspect how your responsive web page displays on various screen sizes, follow the steps below.

When using the Firefox Developer Edition browser:

  1. From the Tools menu, choose the Web Developer command and then Responsive Design Mode.
  2. Resize the screen simply by dragging the right-hand side of the window.   Alternatively, at the top of the window, enter a screen width and/or height. Or click the Responsive dropdown menu and select a mobile phone model. Tutorial RWD: Media Queries To exit responsive design mode, click the Close (X) icon at the top-right of the window.

When using the Google Chrome browser:

  1. Press F12 to display the Chrome DevTools window.
  2. Near the top-left of the DevTools window, click the Toggle device icon.
  3. Resize the screen simply by dragging the right-hand side of the window. Tutorial RWD: Media Queries
  4. At the top of the screen, enter a fixed width or height.   Alternatively, at the top of the window, enter a screen width and/or height. Or click the Responsive dropdown menu and select a mobile phone model. Tutorial RWD: Media Queries

To exit DevTools, click the Close (X) icon at the top-right of the window.

Updating the <head> of your web page

Before you validate your web page and upload it to GitHub, ensure the following details are correct within the <head> of your base-2.html file.

GitHub image

Validating your web page

To check the HTML in your web page is correct or valid, use the official W3C Markup Validation Service as follows.

  1. Go to this web page: https://validator.w3.org.
  2. Click the Validate by Direct Input tab. Tutorial RWD: Media Queries
  3. Select your entire HTML file (both <head> and <body>), and copy-and-paste it into the box named Enter the Markup to validate. Tutorial RWD: Media Queries
  4. Click the Check button.
  5. If you see any errors, return to your base-2.html file in your text editor, fix the errors, save the file, and copy-and-paste the entire file again.  In the HTML Validator, click the Back button of your web browser to again display the Validate by Direct Input tab. Click once in the tab and paste in your corrected HTML file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Validating your stylesheet

To check your CSS is correct, use the official W3C CSS Validation Service. Follow these steps.

  1. Go to this web page: https://jigsaw.w3.org/css-validator.
  2. Click the By direct input tab. Tutorial RWD: Media Queries
  3. Copy and paste your CSS file into the box named Enter the CSS you would like validated.
  4. Click the Check button.
  5. If you see any errors, return to your base-2.css file in your text editor, fix the errors, save the file, and copy the entire file again.  In the CSS Validator, click the Back button of your web browser to again display the By direct input tab. Click once in the tab and paste in your corrected CSS file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Uploading your two files to GitHub

After validating your web page and stylesheet, you are now ready to upload them to your account on GitHub.

  1. Sign in to your account at GitHub.com. At the left of the screen, you can see a list of your repositories. Upload to GitHub
  2. On your GitHub home page, click the name of the repository that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub.   username.github.io   GitHub Upload
  3. On the next screen displayed, near the centre of the screen, click the Upload files button. Project Animation Google Fonts
  4. Select or drag-and-drop the two files base-2.html and base-2.css to upload them to your GitHub account. Project Animation Google Fonts
  5. After uploading your files, scroll down to the bottom of the screen, enter a short message in the Commit changes box and click the Commit changes button.

Your web page is now published on GitHub at a web address similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/base-2.html

It may take a few minutes for your uploaded files to appear on GitHub.


Return to All Tutorials.

 

Further resources

CSS media queries
From W3 Schools

Media queries and responsive web design
From Tutorial Republic

Responsive web design basics
By Pete LePage at the Google Developers Blog

Lesson: Media queries
From Webucator Tutorials

Video: How to use CSS media queries in less than five minutes
By Kevin Powell

Video: CSS media queries and viewport
From Academimind



Return to Contents.