Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
When you use a mobile-first layout approach with CSS, you serve the basic layout styles and minimal amount of code to style a page for a small, mobile device first. Then, using media queries, you add breakpoints which adjust the layout for wider screens and devices.
Note: The
width
value 70%
allows the container's width to grow and shrink with the browser window size. The max-width
value of 1000px
establishes the maximum size that the growing is allowed to reach.
For example, in a browser viewport that is 1400 pixels or wider, the container will always be 1000 pixels wide and will not grow any wider.
Resources
- Brad Frost - Mobile First Responsive Web Design
- Box-Sizing: The Secret to Simple CSS Layouts
- Take Control of the Box Model with box-sizing
Video review
- In theory, It's easier to build a mobile layout when you're first starting out because you don't have to worry about much of the complex features of wider, desktop layouts.
- Mobile layouts are usually simple one column layouts
- When you use a mobile-first layout approach, you define all the common layout styles before adding any media queries.
-
box-sizing: border-box;
forces any padding and borders into the width and height of an element instead of expanding it.
Related videos
Modern layouts are built with mobile
devices in mind from the start.
0:00
It's easier to build a mobile layout
when you're first starting out
0:04
because you don't have to worry
about any of the complex features
0:07
of wider desktop layouts.
0:11
Mobile layouts are usually simple one
column layouts because of the narrow
0:13
screen width on a mobile device.
0:18
This is easier than creating a complex
layout on the desktop first,
0:20
then trying to figure out how to
arrange it for smaller screens.
0:24
When we use a mobile-first layout approach
with CSS, we serve the basic layout styles
0:28
and the minimal amount of code to style
a page for a small mobile device first.
0:34
Then using media queries, we add break
points, which adjust the layout for
0:39
wider screens and devices.
0:44
In other words,
0:46
we define all the common layout styles
before adding any media queries.
0:47
You can check the Teacher's Notes of
this video for more resources and
0:52
videos about the mobile first approach.
0:56
I'm gonna start with a really simple
example of mobile-first layout.
0:58
So the current styles in the CSS
apply to all browsers from phones to
1:03
desktop computers.
1:08
However, on a small screen,
the 70% width of the container makes
1:09
less sense because it's going to
look too narrow on the screen.
1:15
So I should expand the container so
1:20
that it fills the smaller
screen of a mobile device.
1:22
So I'm going to define one
media query in my CSS.
1:26
So first, I'll select and copy one of
the main comment flags in my CSS and
1:30
paste it at the very
bottom of my style sheet.
1:36
And I'll change the text to Media Queries.
1:39
Because this is where I'll
add any media queries.
1:43
So right below the comment flag.
1:49
I'm going to create a new
media query by typing @media.
1:51
Now the mobile-first approach
uses the min-width media feature.
1:57
Since you're building the layout up
from narrow screens to wider screens.
2:03
I want this media query
to target any device or
2:08
viewport width that is
769 pixels or wider.
2:11
So I'm going to set the min-width
value to 769 pixels.
2:15
The mobile-first approach is the approach
we'll use from this point forward.
2:20
So throughout the course, we're going
to add advanced layout styles and
2:24
overrides for larger screens
inside this media query.
2:28
I'm gonna start with one simple CSS rule.
2:31
So you can see the mobile-first in action.
2:34
So every browser from phones to desktop
will load the CSS outside the media query.
2:37
These are the base rules that define
the common styles shared across all
2:44
screen sizes and devices.
2:49
And only those devices
that are 769 pixels or
2:50
wider will load the CSS
inside this media query.
2:55
So I want the container elements
to be 100% wide in small screens.
2:59
So they should take up
the full width of the screen.
3:04
So back in my stylesheet,
I'm going to remove the width and
3:08
margin declarations from
the base container rule.
3:12
So I'm going to select both declarations
and cut it out of the container rule.
3:16
Then I'm going to declare them
inside the media query instead.
3:22
So inside the media query, I'll create
a new rule that targets container.
3:25
And I'll paste in the width and margin
declarations inside this container rule.
3:33
I'm also going to add a max-width
value of 1000 pixels.
3:39
So that the layout container does
not get any wider than 1000 pixels
3:44
on larger screens.
3:49
I also want to give my layout
containers left and right padding
3:50
to separate the content from the
left and right margins of the page.
3:53
So I'm going to add the padding
properties in the base container rule
3:58
since they'll be shared by
all screens and devices.
4:03
So I'll add a padding-left
property first.
4:07
And I'll set the value to 1em.
4:10
And below that, I'll set the
padding-right value to 1em as well.
4:13
So when I save my style sheet and take
a look at my layout in the browser, we can
4:19
see that there's some nice whitespace
around the content and small screens.
4:24
If I open my developer tools and
Inspect any of the container divs,
4:29
I can see that the left and right
padding I applied to the container
4:35
elements makes the layout
wider than 70% of the browser.
4:40
And it's going to make it wider than
the 1000 pixel max-width I applied to
4:44
the container.
4:49
Well, that's because it's adding
the 1em of padding on both
4:50
sides to its total width.
4:54
Now I want the layout's width to be
exactly 70% of the browser viewport and
4:58
the max-width to be exactly 1000 pixels.
5:04
So this is a quirky CSS box model
behavior you've seen before in
5:07
previous CSS courses.
5:12
So I'm going to use the box-sizing
property to prevent any padding and
5:14
border width values
from expanding and
5:18
possibly breaking my layout containers
as I add more content to the page.
5:21
Back in my stylesheet, I'm going
to create a new rule up top and
5:26
my base rules using
the universal selector.
5:30
So that every element inherits
this box-sizing declaration.
5:33
In the rule, I'm going to type
the box-sizing property and
5:38
set the value to border-box.
5:43
The value border-box forces the padding
and borders into the width and
5:46
height of the elements,
instead of expanding them.
5:51
So now my containers take up exactly
70% of the viewport width and
5:55
the max-width will be exactly 1000 pixels.
6:00
Now I've posted a lot of helpful articles
and videos about mobile-first and
6:03
the box-sizing property in
the Teacher's Notes of this video.
6:08
Up next, I'll show you how to keep the
footer at the bottom of the page at all
6:12
times and remove any gaps between
the bottom of the viewport and the footer.
6:16
You need to sign up for Treehouse in order to download course files.
Sign up