Adding Breakpoints for Devices

If a fluid layout is stretched too wide or too narrow, it will eventually "break" and the design won't look good anymore. In those instances, we need to add design breakpoints that allow for the layout to change. This can be done using CSS media queries.

Vocabulary

Breakpoints - The specific screen widths where a responsive layout "breaks" and needs to change in order to accommodate the screen.

CSS Syntax

@media - Media queries use the @media CSS rule to define conditions of the browser medium. In other words, it allows for CSS styling to only be included if certain conditions are met, such as a specific browser width.

0:00

Now that we have a basic overview of

0:02

responsive design, it's time to implement
the last step.

0:06

We're going to use media queries to adjust
our

0:08

page layout based on the width of the
page.

0:12

Each media query we add is referred to as
a break point.

0:16

In other words, our layout can only be
stretched

0:19

so far before it really doesn't look good
anymore.

0:22

Sometimes these break points may even be
based on

0:25

the screen resolutions of popular devices.

0:28

After determining our break points, we'll
add in media queries.

0:33

Let's create a new file called
responsive.css inside of our CSS folder.

0:43

So, I'm going to create a new file here.
And I'll call it

0:49

responsive.css.
Now, let's include this file

0:56

in our HTML.
So we'll go to index.html,

1:02

and we want to include this just after
main.css.

1:08

So let's just copy this line.
Skip down a line

1:13

and paste it and then, instead of
main.css,

1:18

I'm going to say responsive.css.

1:23

Now of course, we need this line in all
three of our HTML files, so let's save

1:29

that out.
We'll go to about.html.

1:34

And just after main.css, let's paste
responsive.css.

1:41

And let's copy that line so we don't have
to type responsive again.

1:46

We'll save about.html, go to contact.html
and paste it there.

1:57

The reason that we want to add this file
after main.css is because

2:02

we're going to be building on top of our
mobile styles to create tablet and

2:07

desktop styles.
Let's go into the responsive.css

2:13

file.
And let's write some media queries.

2:18

These use a special CSS syntax, called a
CSS rule.

2:24

Inside of each media query rule, we'll
write additional CSS

2:29

that will only be added if the conditions
of our media query are true.

2:35

So, let's see what that looks like.

2:37

I'm going to type an @ and then the word,
media

2:44

and then a space, followed by the word,
screen, then another space, and