Coding responsive pages

First steps

The first step in creating our responsive design is to add a meta viewport tag to our HTML header. This gives the browser instructions on how to control the page’s dimensions and scaling. From the Google responsive design fundamentals, TL;DR:

Use the meta viewport tag to control the width and scaling of the browser’s viewport.
Include width=device-width to match the screen’s width in device-independent pixels.
Include initial-scale=1 to establish a 1:1 relationship between CSS pixels and device-independent pixels.
Ensure your page is accessible by not disabling user scaling.

The meta tag looks like this:

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

and implemented in an html document, looks like this:

<!DOCTYPE html>
<html>
<head>
  <title>Our Responsive Page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

</body>
</html>

Creating Structure

Add some divs to the document and wrap them in another div to allow for a flexbox layout.

<!DOCTYPE html>
<html>
<head>
  <title>Our Responsive page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <div class="flex">
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
  </div>
</body>
</html>

Adding Style

Next we need to add a stylesheet to our document and link to it in our html document. In the same directory as the html file, create a style.css file.

<!DOCTYPE html>
<html>
<head>
  <title>Our Responsive page</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="flex">
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
  </div>
</body>
</html>

Turning to our stylesheet, we need to add some rules so our divs show up as cubes.

.flex {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid white;
}

.cube {
  margin: 20px auto;
  width: 200px;
  height: 200px;
  background-color: blue;
}

However, in order to have the page adapt to screen width, we need to add a mediaquery to the css. At a min-width of 700px, we can tell the flexbox layout to wrap, change the flex direction, and justify our content differently.

.flex {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid white;
}

.cube {
  margin: 20px auto;
  width: 200px;
  height: 200px;
  background-color: blue;
}

/*tablet stuff :-/ */
@media (min-width: 700px) {
  .flex {
    /*flex wrap tells the cubes to wrap around*/
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: row;
  }

  .cube {
    width: 50px;
    height: 50px;
  }
}

End result

Below is the end result. Try resizing the browser to see how it behaves!

You can read more about how to apply media queries here, and more about responsive design here.