Responsive Web Design

Now we know how to make pretty websites, but how can we make them look good no matter the device? Most of the people who check out your website will probably be using a computer, but to become even better web developers, it’s a good idea to make our websites adapt when they’re being viewed on tablets and mobile phones.

First things first

To make a web page responsive, you’ll first need to include:

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

somewhere inside the <head></head> tags.

Doing this will tell your browser how to control your web page’s scaling.

According to W3Schools, the width=device-width part "sets the width of the page to follow the screen-width of the device (which will vary depending on the device)."

The initial-scale=1.0 part "sets the initial zoom level when the page is first loaded by the browser."

The <head> section of your HTML file should look something like this:

<head>
  <title> Title of Your Web Page </title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="yourcssfile.css">
</head>

Swapping px for em

Instead of using px when specifying the size of your text, use em!

According to Digital Ocean, em is "a unit that allows setting the font-size of an element relative to the font-size of its parent."

For example:

.parent {
  font-size: 18px;
}
        
.child {  
  font-size: 1.5em;
}

The child would have a font-size of 27px (because 1.5 times 18px is 27px).

em lets us change the size of our text without affecting our websites’ design. Fonts that have a particular size in px will not change in size when screen sizes change. em is scalable while px is not!

Percentages

Instead of using px, we can use percentages when specifying heights, widths, borders, margins, and padding.

The layouts of our websites will be more flexible, so if we create a div with a width of 50%, it will always take up half of the screen no matter how big or small the screen is. If we create a div that has a width of 50px, the div will never change in size.

Using percentages is useful when we have divs inside other divs. For example, if you have a div that spans the entire width of your webpage, you can use percentages for the widths of the divs inside this main div. When you resize your browser, all the divs inside this main div will change in size depending on how big or small the main div becomes.

Let’s see this in action.

Here are two divs. The first div has the class “parent” and the second div has the class “child”.

.parent {
  width: 100%;
}
        
.parent .child {
  width: 75%;
}

Since .parent has a width of 100%, the width of .parent .child is 75% of the width of .parent.

Responsive Images and Videos

To make our images and videos change in size whenever a browser is resized, there are certain properties and values we’ll need to use.

To edit an image’s properties and values, let’s write:

img {
  max-width: 100%;
  height: auto;
  display: block;
}

We write max-width instead of just width to ensure that our image never becomes too big and ends up getting cut off if the browser is resized. We set the image’s height to auto so that the height will automatically change in size (proportional to the image’s width).

Finally, we write display:block; to make sure that other elements won’t align with our image and mess up the spacing of the web page.

We can also we can use the same code for videos!

video {
  width: 100%;
  height: auto;
}

And what about image backgrounds?

If you want to use an image for your web page’s background, you can use the following code to ensure that your image properly scales up or down when the browser is resized.

body {
  background-image: url('https://example.com/example.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

We need to type background-repeat: no-repeat; since images repeat by default.

background-position: center; ensures the image we use will be centered, and background-size: cover; scales the background image so that it will always be kept in proportion.

Media Queries

We use media queries so that our website’s content will change based on different screen sizes. CSS uses media queries to determine the size of the screen the web page is being viewed on. It then applies different CSS styles depending on the screen size.

In the example below, the max-width has been set to 480px. This means that this specific ruleset will only be applied when the screen (that the web page is being viewed on) is 480px or less in width. The background color of our web page will become red!

@media only screen and (max-width: 480px) {
  body {
    background-color: red;
  }
}

You can also specify a range of multiple heights and widths.

In the example below, the ruleset would only apply to screen sizes between 600px and 768px. 

@media only screen and (min-width: 600px) and (max-width: 768px) {

  }

Typical Device Breakpoints

Here’s a list of typical device breakpoints from W3Schools.


        /* Extra small devices (phones, 600px and down) */
        @media only screen and (max-width: 600px) {...}

        /* Small devices (portrait tablets and large phones, 600px and up) */
        @media only screen and (min-width: 600px) {...}

        /* Medium devices (landscape tablets, 768px and up) */
        @media only screen and (min-width: 768px) {...}

        /* Large devices (laptops/desktops, 992px and up) */
        @media only screen and (min-width: 992px) {...}

        /* Extra large devices (large laptops and desktops, 1200px and up) */
        @media only screen and (min-width: 1200px) {...}

Fonts

Pay attention to font sizes. It’s good practice to write code that alters the size of you text as the screen size decreases. You can change the font size of body text, headings, and more!

If the screen size is 769px or more, the font-size of <div>will be 20px.

@media only screen and (min-width: 769px) {
  .example {
    font-size: 40px;
  }
}

If the screen size is 768px or less, the font-size of <div> will be 20px.

@media only screen and (max-width: 768px)
  .example {
    font-size: 20px;
  }
}

If you don’t have a ton of devices of different sizes on hand, you can use a website such as this one to help you see what your web page looks like across screens of different sizes.

Hiding Elements

If there are specific elements that won’t look too good when your web page is viewed on a tablet or a mobile phone, you can hide them by using the code below.

If the screen size is 600px or less in width, this <div> element will disappear.

@media only screen and (max-width: 600px) {
  .example {
    display: none;
  }
}

All right, those are the basics of responsive web design! Now you’re ready to make web pages that can be viewed on mobile phones, tablets, and computers of different sizes. ⚡ To make your websites even more engaging, consider learning the basics of Javascript! ☺

< BACK TO HOME