Introduction to Responsive web design
Tags: beginners, css
Published: 2020-01-18 14:17:05

---
title: Introduction to Responsive web design
published: true
description: An beginners introduction to responsive web design. In this tutorial we cover how to design a responsive site from scratch from theory to code
tags: beginners, css
series: FrontEnd Development Zero to Hero
---

> __... fellow who started that whole “responsive design” thing.__
&mdash; [_Ethan Marcotte_](https://ethanmarcotte.com/)

The term _responsive design_ was coined by web designer Ethan Marcotte in his 2010 article entitled "[Responsive Web Design](https://alistapart.com/article/responsive-web-design)" published in the online magazine [_A List Apart_](https://alistapart.com). In his article Ethan gave the ingredients (discussed later) necessary to achieve a responsive site. 

Over the years the adoption of responsive design has sky rocketed due to a large percentage of users accessing the internet from their mobile phones. Today, most websites are shipped in responsive form (DEV included). Some of these sites are __handcrafted__ from scratch and others employ __frameworks__ to get the job done.

This post will show you the tools necessary to handcraft a responsive website from scratch using HTML and CSS. We'll talk about the _recommended approach_ towards responsive site and we'll write code along the way to support all the theory.

The recommended approach can seem advanced as they contain tips and tricks to deliver a fast website by taking the end user into consideration but, we'll do our possible best to explain.

If you've __followed this series up to this article, a very big thank you!__. Mind you, here are some things you should know to get the most out of this post:

* [CSS units](https://dev.to/ziizium/css-units-2bh1)
* [Media queries](https://dev.to/ziizium/css-media-queries-14fa)

_All screenshots are from <b>Firefox 72.0.1</b> and its Developer Tools. One particular feature in Firefox 72.0.1 that's worthy of mention is the <b>multi-line code editor</b> in the console._

Let's dive in.

<hr>

__Designing a website is hard__ especially if you are handcrafting from scratch using HTML and CSS and at the same time you want to take the user experience into great consideration.

Reading the last paragraph you might ask: How can i take the user experience into consideration during design?

There are so many ways to design with the user in mind, among which is the subject of this article &mdash; _responsive design_ &mdash; which revolves around __designing your website to accommodate varying device screens and resolutions__.

In his seminal article Ethan gave the [three ingredients for responsive design](https://alistapart.com/article/responsive-web-design/#section7). They are:

* Fluid grids
* Flexible images
* Media queries

__Over the years the ingredients have evolved__ with the addition of the following:

* Responsive typography
* Use of relative units in the media queries
* Designing for content not device

From the list above the only thing that might seem _alien_ to you is _responsive typography_. __From a beginners standpoint, responsive typography is an advanced concept__. __We will not talk about it in this article__, but, we'll __write code to show how it works__. A link will be given at end of the post if you would like to dive into the subject.

We've covered relative units when we discussed [CSS units](https://dev.to/ziizium/css-units-2bh1).

On the other hand, when you read _"Designing for content not device"_, you might think this contradict the statement we gave earlier about designing _for varying device screens and screen resolutions_. Well the full statement should be:

> __Designing your site content__ for varying devices and screen resolutions.

Designing your site based on its content is part of a design approach known as [__device agnostic design__](https://trentwalton.com/2014/03/10/device-agnostic/). We'll take this approach in our code example.

Now you might ask: Why should i care about responsive design? Let's take three use cases.

The first use case &rarr; a user might be viewing your website on a smart phone and might decide to switch on _auto rotation_ on their device due to changes in their sitting (or lying) positions which leads to changes in their device resolution as they browse your content.

When this happens they'll expect to still get the __same browsing experience__. If you __did not take this kind of situation into consideration when designing your site__ and the site bails on them when they change their viewing resolution, __they might leave and never come back__.

The second use case is this &rarr; If your website is __readable in the desktop version__ and __difficult to read on mobile__, __the user might look else where__.

For the third case, <b>if you deliver a `2MB` image to a smaller device</b> and the user happen to be on a __slow internet connection__, the image will take __a while to download__ and they might __leave before the download completes__.

__When you use responsive design in a responsible way you'll have done your best in delivering the best user experience imaginable__. You don't need any special tool to achieve this because everything is available in native CSS.

That's it for the theory, let's write some code. Ready? Let's go!.

<hr>

The following images are the different views of the example we'll be working on:

![Mobile view of the design](https://thepracticaldev.s3.amazonaws.com/i/3f6j9t2ks2rsbfzhtn4v.png)<figcaption>Mobile view of the design</figcaption>

![Tablet view of the design](https://thepracticaldev.s3.amazonaws.com/i/061yfe09dv4sh9hb6c1r.png)<figcaption>Tablet view of the design</figcaption>

![Desktop view of the design](https://thepracticaldev.s3.amazonaws.com/i/6jty9x1j5voqmj3zb5nq.png)<figcaption>Desktop view of the design</figcaption>

Our major concern is to explain the CSS bit by bit, so here is the whole HTML markup:

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="author" content="Habdul Hazeez">
	<title>Introdction to Responsive Design</title>
	<link rel="stylesheet" type="text/css" href="responsive.css">
</head>
<body>

<!-- Header -->
<header class="header">
	<h1 class="header__app-name c-white text-center">
		<a href="">Responsive Design</a>
	</h1>

	<form class="search-form" action="" method="post">
		<label for="search-site" class="hidden">Search site</label>
		<input class="search-form__input" type="search" name="search" id="search-site" value="" placeholder="Search. e.g. JavaScript" required>
		<button type="submit" value="Search" name="submit_search" class="search__button c-white">Search</button>
	</form>
	
	<nav class="navigation">
		<ul class="navigation__menu">
			<li class="navigation__item">
				<a class="navigation__link" href="#">HTML</a>
			</li>
			<li class="navigation__item">
				<a class="navigation__link" href="#">CSS</a>
			</li>
			<li class="navigation__item">
				<a class="navigation__link" href="#">JavaScript</a>
			</li>
			<li class="navigation__item">
				<a class="navigation__link" href="#">PHP</a>
			</li>
			<li class="navigation__item">
				<a class="navigation__link" href="#">Design</a>
			</li>
		</ul>
	</nav>
</header> <!-- ./Header -->

<div class="container">
	<main class="blog-content clearfix"><!-- Blog Article -->
		<article class="post">
			<header class="post__header">
			  	<div class="post__meta">
			    	<h1 class="post__title">Introduction to CSS Block Formatting Context</h1>
				    <span class="post__author">
				    	<strong>By:</strong> <a class="post__author-link" href="#">ziizium</a>
				    </span>
				    <span class="post__date"><strong>Published: </strong> 2019-10-02</span>
				    <span class="post__comment"><strong>Comments: </strong>0</span>
				</div>
		  	</header>

			<div class="post__entry">
				<p class="post__content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmodtempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam,quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodoconsequat.
Duis aute irure dolor in reprehenderit in volupta...</p>
			</div>

			<div class="tag">
				<ul>
					<li class="tag__item">
				  		<a class="tag__link" href="#">CSS</a>
				  	</li>
				  </ul>
			</div>

			<div class="post__continue">
				<a href="#" class="post__continue-reading">Continue Reading...</a>
			</div>
		</article> <!--./Blog Article -->
	</main>
		
	<aside class="sidebar desktop"> <!-- Sidebar -->
		<div class="sidebar__container">
			<h1 class="sidebar__heading c-white">Latest Post</h1>
			<ol class="sidebar__menu">
				<li class="sidebar__item">
					<a class="sidebar__link" href="#">Introduction to CSS Block Formatting Context</a>
				</li>
			</ol>
		</div>
		<div class="sidebar__container">
			<h1 class="sidebar__heading c-white">Archive</h1>
			<ul class="sidebar__menu">
				<li class="sidebar__item">
						<a class="sidebar__link" href="#">October</a>
				</li>
			</ul>
		</div>
	</aside> <!--./Sidebar-->

	<aside class="sidebar mobile"> <!-- Sidebar Mobile -->
		<div class="sidebar__container">
			<h1 class="sidebar__heading c-white">Latest Post</h1>
			<ol class="sidebar__menu">
				<li class="sidebar__item">
					<a class="sidebar__link" href="#">Introduction to CSS Block Formatting Context</a>
				</li>
			</ol>
		</div>

		<div class="sidebar__container">
			<h1 class="sidebar__heading c-white">Archive</h1>
			<ul class="sidebar__menu">
				<li class="sidebar__item">
					<a class="sidebar__link" href="#">October</a>
				</li>
			</ul>
		</div>
	</aside> <!--./Sidebar-->

	<div class="push"></div>
	<div class="clearfix"></div>

</div> <!--./container-->

<!-- Footer -->
<footer class="footer c-white text-center">
	<div class="social-media">
		<li class="social-media__item"><a href="https://twitter.com/ziizium">Twitter</a></li>
		<li class="social-media__item"><a href="https://github.com/ziizium">Github</a></li>
	</div>

	<div class="author-info">
		<p class="author-info__content">A project by ziizium</p>
	</div>

	<div class="site-info">
		<ul class="site-info__menu">
			<li class="site-info__item"><a href="#">Contact</a>
		</li>
		</ul>
	</div>
</footer> <!--./Footer-->
</body>
</html>
```

Observing the code above you'll notice we used the __BEM__ naming methodology discussed in the article &mdash; [CSS Naming Conventions](https://dev.to/ziizium/css-naming-conventions-5gd6).

You should also note that we've created a CSS file named `responsive.css`. __Kindly create your CSS file and give it your desired name and make sure it's linked with the HTML file__.

When you take closer look at the `<head>` section of the code, you will notice the following:

```html
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
```

The first meta tag tells IE how to behave in regards to the value you set (IE=edge etc) if it is not there IE will show the site how it thinks best it should be shown. That could be compatibility mode or that could be the latest version of IE ([source](https://stackoverflow.com/questions/6771258/what-does-meta-http-equiv-x-ua-compatible-content-ie-edge-do#comment8044578_6771584)).

The second meta tag is telling the browser the following:

1. The width of the content should be equal to the `viewport` (available browser window)
2. The content should scale to the browser window
3. The browser should not shrink the content to fit the browser window

If you remember __one of the use case discussed__ earlier you'll notice __the first point in the list above should take care of it__.

In our CSS file, the __first thing we'll do is to reset the margin and padding for all elements on the page__ with the universal CSS selector (`*`). Why are we doing this? The reason we are taking this approach is because of the browser styles applied to HTML elements by default.

When we do this, any margin values will be small unless we really need a big margin. If you load your HTML in the browser, you'll notice there are margins and paddings applied on all side on the page and  block elements.

After resetting the margins and paddings we also change the `box-sizing` property to `border-box`. If you would like to know why we did this please refer to the post on [CSS Box model](https://dev.to/ziizium/the-css-box-model-14k).

The following CSS will take care of it:

```css
/**
  * Reset all margins and paddings
  * and set box sizing to border-box
  */ 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
```

Save your CSS and refresh your browser to see the changes.

![Reset of margins and paddings of HTML elements on a page](https://thepracticaldev.s3.amazonaws.com/i/vcoshhdwgy6077oquwxg.png)

Next, we set up [variables](https://dev.to/ziizium/css-variables-1n72) for some repeated values. The variables will be applied in the [global scope](https://www.smashingmagazine.com/2016/11/css-inheritance-cascade-global-scope-new-old-worst-best-friends/) hence we use the `:root` pseudo-class [selector](https://dev.to/ziizium/css-selectors-1ch3):

```css
/*
  * Variables for some repeated data
  */
:root {
    --none: none;
    --white: white;
    --light-blue: hsl(210, 50%, 60%);
    --light-grey: hsl(53.2, 4%, 41.2%);
    --width-100: 100%;
}
```

Currently we are using the browser default `font-family`and `font-size` (`Times New Roman` and `16px`), let's change that along with the page `height` and a little aesthetics.

```css
/**
  * Set the font family to Georgia with "Trebuchet MS"
  * and Verdana as backup options
  * 
  * We also make use of responsive typography
  * by performing some calculations using the
  * calc() function available in CSS
  *
  * The height is set to 100% due to the approach
  * we'll take in sticking the footer to the bottom
  * of the page.
  *
  * The word-wrap property with the break-word value
  * will allow word to break into multiple lines 
  */
html,
body {
    font-family: Georgia, "Trebuchet MS", Verdana, san-serif;
    font-size: calc(13px + (22 - 16) * (100vw - 320px) / 1200);
    height: 100%;
    word-wrap: break-word;
}
```

Save your file and refresh your browser to notice the changes.

![Changing the default font family of the browser](https://thepracticaldev.s3.amazonaws.com/i/13n9wpfvbq6wnl2g7knk.png)

The next piece of code will remove the default styling for the HTML list and the `text decoration` of the links. We also change the `font-color` to white. Mind you, we are using the variables we set up earlier.

```css
/**
  * Remove the default styling for the lists
  * and links.
  */
li {
    list-style-type: var(--none);
}

a {
    text-decoration: var(--none);
    color: var(--white);
}
```

If you save and refresh your browser all the links will be "gone" due to their color that blends with the background color. Let's give the page header a background color among other things.

```css
/**
  * Here we change the background-color of
  * the header to blue, we apply some paddings
  * on all side and we give the app-name some
  * margin-bottom to create some space
  * between the app-name and the links
  */
.header {
    background-color: #1560bd;
    padding: 1.2em;             /* Internal Spacing */
}
.header__app-name {
    margin-bottom: 0.5em;
}
```

We are taking a [mobile first](https://www.lukew.com/ff/entry.asp?933) approach, which means __all styles so far will apply to mobile devices__. At the same time __we are designing for the content not the device__.

The following styles is __an attempt to make the search form user friendly__ and at the same time we are taking _touch_ devices into consideration.

```css
/**
  * Styling the search form
  */
.search-form__input {
    padding: 0.4em;
    margin-right: 0.2em;
    border: var(--none);
    width: var(--width-100);
}

.search__button {
    margin-top: 0.4em;
    padding: 0.45em;
    border: var(--none);
    background-color: var(--light-blue);
    width: var(--width-100);
}

.search__button:hover {
    background-color: var(--light-grey);
    cursor: pointer;
}
```

Save and refresh your browser, you'll notice the search button is now flat and the __default border applied to form input are non existent__. This is part of a design approach known as [flat design](https://www.interaction-design.org/literature/topics/flat-design).

Switch on _Responsive Design Mode_ in your browser via the _Developer Tools_ or with <code><b>Ctrl</b> + <b>Shift</b> + <b>M</b></code> in Windows&trade;. You can resize the browser window to a mobile view as depicted in the image below.

![Mobile of a responsive design](https://thepracticaldev.s3.amazonaws.com/i/nu1gbgjkj7y3tewvyhuu.PNG)

Now, gently resize the browser window until the header seems out of place. In our case it will be `768px`. We'll have to convert this value to `em` to make the layout adapt easily.

The result will be `48em` (`768/16`). We'll make use of this value in our media query.

```css
/**
  * The header looks out of place at about
  * 768px which is equal to 48em
  */
@media screen and (min-width: 48em) { /* 768/16 = 48 */
  /* The app name is floated left */
  .header__app-name {
      float: left;
      margin-top: -0.2em; /* This will move the header down a little bit */
  }

  /* The search form is floated right */
  .search-form {
      float: right;
  }
}
```

The navigation looks good on mobile, resize your browser to a certain point at which the navigation looks bigger than required, this will be a good break point.  `560px` seems good, in `em` unit this will be `35em`. We'll make changes at this point.

```css
/**
  * The navigation menu is transformed to a flex
  * container, we remove the border and then add
  * some padding.
  *
  */
@media screen and (min-width: 35em) {
  .navigation__menu {
      display: flex;       /* We change display to flexbox */
      border: var(--none);
      padding: 0 1em;
  }

  .navigation__item {
       flex: 1;
       margin-right: 1.2em;
  }

  /**
    * We remove the border from the navigation
    * then we add some padding and we align the
    * text to the center
    */
  .navigation__item:not(:first-child) {
      border: 0;
  }

  .navigation__link {
      padding: 0.3em;
      text-align: center;
  }
}
```

Resize your browser to a point the navigation comes crashing.

![The header not displaying well](https://thepracticaldev.s3.amazonaws.com/i/5v4yy8edyymuiisgfs84.png)

This should be another break point and it looks like the tablet layout i.e `768px`or `48em` . All we need is some margin and padding.

```css
/**
  * Our next break point for the navigation.
  * We apply some margin and padding to sort
  * of keep it in check.
  */
@media screen and (min-width: 48em) {
  .navigation__menu {
      margin-top: 3.5em;  /* Outer spacing to bring it down */
      padding: 0 4em;     /* Padding applied to all four sides */
  }
}
```

Save and refresh your browser, it should look better.

Our approach to get a sticky footer involves some extra markup (i know we can use flexbox). The extra markup will be an empty `div` element with some height so that it can push the footer further downwards. We'll make use of the `min-height` property with a value of `100%` to make sure the container occupy enough space.

```css
/**
  * Most of the code here allow us to create a sticky
  * footer.
  */
.container {
    margin-bottom: -3.125em;  /* The height of the push element */
    min-height: 100%;         /* This make the sticky footer possible */
    padding: 1em;
    overflow: auto;
}
```

Save and refresh your browser. You'll notice the footer text moves to the bottom of the page.

The layout we are trying to achieve is a two column layout &mdash; _blog content_ and a _sidebar_. Currently our sidebar is "invisible" due to the link colors blending with the background color. 

```css
/**
  * The sidebar container is given a background color
  * of blue with some margin and padding applied.

  * We apply style to the heading and menu as decoration.
  *
  * In the process we make the sidebar links clickable
  * on mobile.
  */
.sidebar__container {
    background-color: #1560bd; /* A variant of blue */
    margin-bottom: 0.5em;
    padding: 0.7em;
}

.sidebar__heading {
    font-size: 130%;           /* Typography */
    font-variant: small-caps;  /* Typography */
    margin-bottom: 0.5em;
}

.sidebar__menu {
    font-size: 95%;
    border: 1px solid #cccccc; /* A variant of silver */
}

.sidebar__item:not(:first-child) {
    border-top: 1px solid #cccccc;
}

.sidebar__link {
    display: block;           /* Setup to make it clickable */
    padding: 0.8em 1em;       /* Creating the clickable area */
    width: 100%;
}

.sidebar__link:hover {
    text-decoration: underline;         /* Visual effects */
    background-color: var(--light-blue);
}
```

Save and refresh. You'll notice we have a problem in the layout. There are two sidebars, one meant for a desktop user and the other for a mobile user.

![Two sidebars](https://thepracticaldev.s3.amazonaws.com/i/mylqdwshimzutd98srka.png)

The solution is simple, all we have to do is __hide the desktop sidebar on mobile__ and then __hide the mobile sidebar on desktop__ (_hacky!_ if you might say).

```css
/**
  * Allow the sidebar to take up much needed space
  * then hide the desktop version.
  */
.sidebar {
    width: 100%;
}

.sidebar.desktop {
    display: var(--none);  /* We are using CSS variables */
}
```

When you resize your browser to the tablet layout, the _blog_ container and the sidebar appear on top of each other it will be a good idea to have the two column layout at this point.

```css
/**
  * We float the blog-content to the left
  * and set its width to 70%. The overflow property
  * is set to auto to prevent the content from
  * overflowing.
  */
@media screen and (min-width: 48em) {
  .blog-content {
      float: left;
      width: 70%;
      margin-bottom: 1.2em;
      overflow: auto;
  }

  /**
    * Sidebar is floated to the right and given
    * a width of 25%
    */

   .sidebar {
       float: right;
       width: 25%;
   }

  /**
    * Hide the mobile sidebar,then
    * show the desktop sidebar
    */
    .sidebar.mobile {
        display: var(--none);
    }

    .sidebar.desktop {
        display: block;
    }

   /**
     * Remove the border-top property of the
     * sidebar item
     */
     .sidebar__item {
         border-top: var(--none);
     }

   /**
     * Reduce the padding of the sidebar links
     */
     .sidebar__link {
         padding: 0.2em 0.3em;
     }

   /**
     * Remove the border from the sidebar
     * in tablet and desktop mode
     */
      .sidebar__menu {
          border: var(--none);
      }

}
```

Save and refresh your browser to see the changes.

Based on our design the _post_ section has a border with some `box-shadow` effect, let's implement that.

```css
/**
  * We add borders to the post area and some
  * box shadow effect.
  *
  * The first value supplied to the box-shadow
  * will be for the x axis (horizontal) and the second value
  * is fr the y axis (vertical) 
  */
.post {
    border: 2px solid #1560bd;
    box-shadow: -3px 3px #1560bd;
    background-color: #f9f9fa;
    margin: 0 0 1.5em 0.2em;
    overflow: hidden;
}
```

The _post metadata_ i.e the author name, date and comments are currently displayed in their default `inline` [position](https://dev.to/ziizium/css-positioning-34d8) but, we need them to look good on mobile therefore we change their `display` to block and we apply some paddings and margins.

```css
/**
  * Here we change the display property of the post
  * author, date and comment to block
  */
.post__author,
.post__date,
.post__comment {
    display: block;
    margin: 0.6em 0 0.7em 0;
}
```

In the tablet and desktop version of the site we have to change the display back to `inline` so that everything aligns on a single line.

```css
/**
  * We reset the display back to inline
  * on tablet and desktop
  */
@media screen and (min-width: 48em) { /* Tablet upwards */
    .post__author,
    .post__date,
    .post__comment {
         display: inline;
    }
}
```

You can save your file then resize the browser to see the changes.

The _author_ link is currently invisible let's fix that.

```css
/**
  * Change the author link to blue
  * and apply a border-bottom with a
  * value of double
  */
.post__author-link {
    color: #1560bd;
    border-bottom: double;
}
```

__Snap the display back to mobile__. Now, if you take a look at the paragraph text you'll notice in its __current form the text is almost unreadable__. We have to increase the `font-size`, apply a `line-height` and some margins. We'll make use of the `hyphens` property so that the browser can insert an hyphen at the end of a paragraph if the word breaks into another line.

We'll have to apply some `margin-bottom` to the _post meta_, _post title_ and _post author_ to align them properly in desktop view.

```css
/**
  * Typography for the paragraph text and
  * post meta data.
  */
.post__content  {
    margin: 0.5em 0 1.2em 0;
    line-height: 1.618;
    font-size: 1.2em;
    hyphens: auto;
}

.post__meta,
.post__title {
    margin-bottom: 0.7em;
}

.post__author {
    margin-right: 0.5em;
}
```

We need to apply some internal spacing to the _tag_, _post meta_ and _post entry_.

```css
/**
  * Internal spacing applied to the tag
  * post meta data and post entry
  */
.tag,
.post__meta,
.post__entry {
    padding: 0.5em;
}
```

The _tag_ is currently not visible due to the link color. Let's take care of that.

```css
/**
  * Cosmetics for the tag. First we move the tag down
  * a little bit and then customize the tag item
  * and tag link
  */
.tag {
    margin-top: 0.2em;
}

.tag__item {
    display: inline-block;
    text-transform: uppercase;
    margin-right: 0.5em;
    background-color: #1560bd;
    padding: 0.8em;
    margin-bottom: 1.5em;
}

.tag__link {
    padding: 0.6em;
}
```

What's next? The _continue reading_ link. The link has to be clickable on mobile. By applying some padding and width. The rest of the code are cosmetics to make it stand out.

```css
/**
  * Here we make sure the "continue reading" link
  * is clickable and usable on mobile
  */
.post__continue-reading {
    display: block;    /* Setup to make it clickable */
    padding: 0.6em;    /* Creating the clickable area */
    color: #1560bd;
    background-color: #dddddd;
    margin-top: 0.8em;
    width: 100%;
    text-align: center;
    font-weight: bold;
    border-top: 2px solid #1560bd;
}

.post__continue-reading:hover,
.post__continue-reading:focus { /* For human interaction */
    text-decoration: underline;
    background-color: #1560bd;
    color: #ffffff;
}
```

For the desktop version of this design, we'll prefer the user make use of their mouse. The indicator that the user is interacting with the element will also change, this time to an _underline_.

The _tag_ is also floated to the left and given a width of `50%` and the _continue reading_ will occupy the remaining space.

```css
/**
  * On tablet and on desktop we change the
  * "continue reading" link to a text the
  * user click on by eliminating all the effects
  * added for mobile users - padding and border.
  */
@media screen and (min-width: 48em) {
  .post__continue-reading {
       padding: 0;
       border: var(--none);
       background-color: #f9f9fa;;
       text-align: right;
  }

  .post__continue-reading:hover {
       text-decoration: underline; /* Serve as an indicator on mouse over */
       background-color: #f9f9fa;
       color: #1560bd;
  }

  /**
    * The tag and post__continue container are
    * floated left
    */
    .tag,
    .post__continue {
        width: 50%
        float: left;
    }

  /**
    * A little bit of padding
    */
    .tag__item {
        padding: 0.15em;
    }
	
}
```

Save and refresh your browser, you'll observe the footer is in contact with the sidebar in the mobile view. Remember, __we are using additional markup to push the footer further down the page__.

We've created the empty `<div>` element  in our HTML, what remains is the CSS. In our CSS, we'll give the `<div>` an `height` to get the space that'll separate the footer from the sidebar at all times.

```css
/**
  * The div in our HTML with a class pf push is
  * given an height that'll push the footer further
  * down the page.
  */
.push {
    height: 3.125em;
}
```

We are almost done! The footer is next, the following snippet brings the footer to life.

```css
/**
  * The footer style, the code is quiet
  * simple
  */
.footer {
    background-color: hsl(53.2, 4%, 41.2%);
    color: #ffffff;  /* White */
    overflow: auto;
    padding: 1.25em;
    margin-top: 1.2em;
}

/**
  * All footer elements are given a margin bottom
  * of 1.2em
  */
.footer * {
    margin-bottom: 1.2em;
}

.footer a {
    text-decoration: underline;
}
```

This works for mobile devices but looks out of fashion on desktop devices. All we need is a media query break point to change the layout.

```css
/**
  * We change the footer layout to a three
  * column layout on tablet and desktop devices
  */ 
@media screen and (min-width: 32em) {
  .footer div {
      width: 33.33%;
      float: left;
  }

  .social-media li {
      display: inline;
      margin-right: 1.2em;
  }
}
```

Almost there! In our HTML we used some utility classes like `c-white`  (for white text), `text-center` (align center) and `hidden` (hide page element) now let's write the CSS.

Before that, we use `float` for our layout, and due to the behavior of floated element, there will be issues when you add another element after the `<main>`. Therefore a clearfix is needed.

The clearfix main ingredient is the CSS `clear` property armed with pseudo-elements `::before` and `::after` we can ensure the  addition of elements after `<main>` without breaking the layout.

```css
/**
  * Utility classes
  */
.clearfix {
    overflow: auto;
}

.clearfix::before,
.clearfix::after {
    display: table;
    content: " ";
}

.clearfix::after {
    clear: both;
}

.c-white {
    color: #ffffff;
}

.text-center {
    text-align: center;
}

.hidden {
    position: absolute;
    text-indent: -9999px;
}
```

There you go, a fully responsive layout. Try and resize your browser manually to see how the layout adapt or better still switch on _Responsive Design Mode_ in your browser.

For Firefox the shortcut is <code><b>Ctrl</b> + <b>Shift</b> + <b>M</b></code> on Windows. The shortcut is the same for Chrome but, the _Developer Tools_ has to __opened and active for the shortcut to work__.

Here are recommendations on designing a responsive site:

* Start with mobile layout
* Expand the browser window to a point the layout breaks, this would be your break point

__When you follow the recommendations you'll be designing for content and not device. Therefore your layout will adapt as needed__.

In addition:

* Use relative units like `em` in your media queries

__I'll encourage you to break the code, then do your possible best to fix it. There is no better way to learn than solving your own problems.__

###__Aside__

We did not implement _responsive images_ in our example but, we'll surely do that in our final project for this series.

In addition to that, if you'd like to know more on _responsive typography_ kindly check out the following resource:

* [Precise control over responsive typography](https://www.madebymike.com.au/writing/precise-control-responsive-typography/)

<hr>

Our next topic is theoretical and it's about the layout design and some coding decisions for this example &mdash; _Progressive Enhancement_.

I'll see you then.