Per forScrimba

Posted onAug 20, 2019 • Edited onApr 16, 2020

Learn responsive web design in 5 minutes

#css #responsivedesign #html #tutorial

In this article, I'll teach you as many responsive design techniques as I possibly can in five minutes. This obviously isn't enough to learn it properly, but it will give you an overview of the most important concepts, which I personally define as these:

Relative CSS units
Media queries
Flexbox
Responsive typography

If you want to dive deeper into the subject afterward, you can check out ourresponsive web developer bootcamp on Scrimba, which will enable you to build responsive websites on a professional level.

Click the image to get to the course.

But for now, let's start with the basics!

Relative CSS units

At the core of responsive web design are relative CSS units. These are units that get their value from some other external value. This is handy because it allows, for example, the width of an image to be based on the width of the browser.

The most common ones are:

In this article, we'll start with the percentage unit%, and then we'll look at therem unit in the final section.

Let's say you have a very simple website, like this:

Its HTML is just the following:

<body><h1>Welcome to my website</h1><imagesrc="path/to/img.png"class="myImg"></body>

As you can see from the GIF below, our image will by default have a fixed width:

That's not particularly responsive, so let's change that to 70 percent instead. We'll simply do the following:

.myImg{width:70%;}

This sets the width of the image to 70 percent of the width of its parent, which is the<body> tag. As the<body> tag spans the entire width of the screen, the image will always be 70 percent of the screen itself.

Here's the result:

And that's how easy it is to create a responsive image!

Using media queries to improve the mobile experience

We have one problem with our responsive layout, though, which is that it looks weird on very small screens. The 70% width is to narrow when viewed on mobile. Just have a look for yourself:

Making it look better in this situation is a perfect task for media queries. They allow you to apply different styling based upon, for example, the width the screen. We can basically sayif the screen is less than 768px wide, use a different styling.

Here's how we create a media query in CSS:

@media(max-width:768px){.myImage{width:100%}}

This CSS block will only be applied if the width of the screen is less than 768 pixels.

Here's the result:

As you can see, the page has a breakpoint where the image suddenly becomes wider. That's when the browser is 768 pixels wide, and the image swaps between70% and100%.

Using Flexbox for the navbar

Next up is Flexbox. You simply can't learn about responsiveness without learning about Flexbox. It changed the responsive design game when it was introduced a few years ago, as it makes a lot easier to position elements responsively along an axis.

To utilize Flexbox we'll make our site a bit more complex by adding a navbar above the title. Here's the HTML for that:

<nav><ahref="#">Home</a><ahref="#">About me</a><ahref="#">Contact</a></nav>

By default, it'll simply look like this.

Our navigation items are all squeezed into the left side, which isn't what we want. We want them to be spaced evenly throughout the page.

To achieve that, we'll simply turn the nav container into a flexbox, and then use the magicaljustify-content property.

nav{display:flex;justify-content:space-around;}

Thedisplay: flex turns the<nav> into a flexible box, and thejustify-content: space-around tells the browser that the items inside the flexible box should have space around them. So the browser distributes all leftover space equally around the three items.

Here's how it looks. And as you'll notice, it scales nicely:

Responsive typography: rem

The final step is to make our typography responsive as well. You see, I want the navbar and the title to shrink a bit when the screen is less than 768 pixels wide (our media query breakpoint, remember?).

One way to do this would be to decrease all the font sizes in the media query, like this:

@media(max-width:768px){nav{font-size:14px;}h1{font-size:28px;}}

This isn't ideal though. We might end up with several breakpoints in the app, and have multiple elements as well (h2, h3, paragraphs, etc). As a result, we'll have to keep track of all the elements in all the different breakpoints. It'll be a mess!

However, most likely, they're going to relate to each other in more or less the same way throughout the various breakpoints. For example, theh1 will always be larger than theparagraph.

So what if there was a way I could adjust one factor, and then make rest of the font sizes would scale relative to that factor?

Enter rems!

Arem is basically this: the font-size value you've set to your<html> element. Like this:

html{font-size:14px;}

So in this document, onerem equals 14px.

That means that we can set all our font sizes on our website inrem units, like this:

h1{font-size:2rem;}nav{font-size:1rem;}

And then we'll simply change the font-size value for the<html> tag inside our media query. This will ensure that the font size for ourh1 andnav elements will change as well.

Here's how we change ourrem value in a media query:

@media(max-width:768px){html{font-size:14px}}

And just like that, we have a breakpoint for all of our font-sizes as well. Notice how the font-size changes as the page crosses the 768-pixel mark:

It's only been five minutes, but now you've actually learned to make font-sizes, images, and navbar items to respond to the width of the page. That's pretty good, and you've taken your first steps towards learning the highly valuable skills of building responsive websites.

If you're interested in continuing this learning journey, I'd recommend you to take a look at ourmassive Scrimba course on the subject!. It's taught by one of YouTube's most popular teachers on the subject, and it'll take you to a professional level in responsive web design.

Happy coding :)

Top comments(12)

Ben Halpern

A Canadian software developer who thinks he’s funny.

Email
ben@forem.com
Location
NY
Education
Mount Allison University
Pronouns
He/him
Work
Co-founder at Forem
Joined
Dec 27, 2015

• Aug 20 '19

Copy link

%
em
rem
vw
vh

I feel like the fact that so much of this didn't exist when I first got into webdev hinders my capacity to reach for the good stuff these days. Stuck in my ways. I feel good for the new crop of devs that gets to grow up with all these options.

Josh

I take words, and build things out of them. I also gay all the things.

Location
San Francisco
Education
life on The Streets. (... no, I didn't really have that.)
Work
Web architect at a desk
Joined
Jul 4, 2019

• Aug 21 '19

Copy link

It's never too late to learn!

No, seriously. That "old dog new tricks" stuff is all kinds of wrong 😐

Ken Bellows

Full-time web dev; JS lover since 2002; CSS fanatic. #CSSIsAwesomeI try to stay up with new web platform features. Web feature you don't understand? Tell me! I'll write an article!He/him

Location
Baltimore, MD, USA
Education
BS Computer Science, RPI
Work
Software Developer
Joined
Jul 11, 2018

• Aug 20 '19

Copy link

Great stuff! Responsiveness is so critical in the mobile era, but still so many sites, even for major corporations, are complete trash on mobile...

If I may shamelessly self-promote for a moment, I wrote an article a while back about how CSS Grid's named areas combined with media query breakpoints are an absolutedream for creating responsive layouts:

CSS Grid Areas are amazing

Ken Bellows ・ Dec 31 '18 ・ 8 min read

#css#grid#web#tutorial

Vitaly Kiselev

will write bio later

Location
Belarus, Minsk
Work
web dev at SolbegSoft
Joined
Nov 27, 2019

• Dec 1 '19

Copy link

Thanks a lot, great and very interesting article! I met itsrussian translation with the link to this original page, read your original article and signed up here atdev.to for posting my first coment :)

Are there a couple of a small typos?

Using media queries to improve the mobile experience

@media(max-width:768px){.myImage{width:100%}}

Should class name bemyImg instead ofmyImage?

Responsive typography: rem

@media(max-width:768px){html{font-size:14px}}

Font-size already has been defined by 14 pixels for the whole document therefore should it be better to set font-size in the last listing, for example, by 10px for demonstrating purposes?

Maneesh Kumar 🇮🇳

I am a software engineer

Location
India
Work
Web developer at R Systems international ltd
Joined
Jul 24, 2019

• Aug 21 '19

Copy link

This is great article for responsive web pages. Now days all websites are responsive. On adding to that we can also use CSS grid for responsiveness. It has also very nice features for different size screens.

Chris Achard

I'm trying to teach everything I know at chrisachard.comInstructor at egghead.ioMostly, I use JS, React, Rails, and Node

Email
chris@nanohop.com
Location
USA
Work
I teach people stuff! at Myself :) I'm an independent consultant - mostly javascript
Joined
Aug 14, 2019

• Aug 21 '19

Copy link

Great intro article; thanks. I can never remember the @media query syntax for some reason - so it's always good to read more about it :)

Raunak Hajela

I help businesses building robust B2B SaaS products, and processes.

Work
CTO at What a Story
Joined
Jun 4, 2019

• Aug 20 '19

Copy link

You have a great skill of teaching things. It would be awesome if you had covered other units but no issues will check on that bootcamp. This is wonderful article, you are unicorn 😃