Introduction to Responsive Web Design

Welcome to an exciting chapter! We know that HTML, CSS, and JavaScript are the key languages that bring web pages to life. But devices like smartphones, tablets, laptops, or smartwatches which are used to view our pages come in various sizes. The solution? Responsive Web Design. It ensures that web pages detect the viewer's screen size and orientation and adjusts the layout accordingly. It's similar to words in a book reflowing to fit pages of different sizes. Now, let's delve deeper!

The Viewport Meta Tag — Essential for Mobile Responsiveness

Before we dive into responsive design techniques, there's one critical piece you need in every responsive webpage: the viewport meta tag. Without it, mobile browsers will display your page as if it were on a desktop screen, making everything tiny and forcing users to zoom.

Add this to the <head> section of your HTML:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

What does this do?

  • width=device-width tells the browser to use the device's actual screen width
  • initial-scale=1.0 sets the initial zoom level to 100%

Without this tag, your media queries won't work properly on mobile devices! This is the foundation of all responsive design.

Understanding Media Queries

To make your site responsive, you should embrace CSS Media Queries. These are instrumental in Responsive Web Design. Media queries implement certain CSS rules when specific conditions are fulfilled. For example, the following is a simple media query that applies a rule when the browser window is less than 600 pixels wide:

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue; 
    /* If the above condition is met, the background color of the page changes to lightblue */
  }
}

In the above segment, screen is the media type and (max-width: 600px) is the media feature. It changes the body's background color to light blue when the viewport is 600 pixels wide or less.

Creating Responsive Layouts with Media Queries

Media queries modify layouts based on screen size. For example, a webpage layout on a large screen (like a desktop) would differ from that on a smaller screen (like a smartphone). Here's an example:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>

    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>

  </body>
</html>

And the corresponding CSS in styles.css:

/* For larger screens (width equal 600px or more) */
@media screen and (min-width: 600px) {
  .column {
    width: 30%;  /* Each column size is 30% of the total width of its containing element */
    float: left;  /* Float is used to push the columns to the left side of the containing element */
    margin-left: 1%;  /* Creates a 1% space at the left side of the column */
    margin-right: 1%;  /* Creates a 1% space at the right side of the column */
    margin-top: 2%;  /* Creates a 2% space at the top of the column */
    margin-bottom: 2%;  /* Creates a 2% space below the column */
  }
}
/* For smaller screens (width less than 600px) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;  /* Each column size is 100% of the total width of its containing element */
    float: none;  /* Columns are not floated and hence render vertically */
    margin-top: 2%;  /* Creates a 2% space at the top of the column */
    margin-bottom: 2%;  /* Creates a 2% space below the column */
  }
}

Note that when we give a value as a percentage, such as margin-left: 1%;, it means that the left margin is set to 1% of the total width of the parent element. For example, if the parent element has a width of 800px, a margin-left: 1%; on the child element would be equivalent to 8px.

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal