This course will be retired on July 12, 2021. We recommend "Mobile-First CSS Layout" for up-to-date content.
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 because you
0:04
don't have to worry about any of the
complex feature of wider desktop layouts.
0:08
Mobile layouts are usually
simple one column layouts
0:13
because of the narrow screen
width on a mobile device.
0:16
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:40
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:55
I'm gonna start with a really simple
example of mobile first layout.
0:59
So the current styles in
the CSS apply to all browsers,
1:03
from phones to desktop computers.
1:07
However, on a small screen,
the 70% width of the container
1:10
makes 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:40
because this is where I'll
add any media queries.
1:43
So right below the comment flag,
I'm going to create a new media
1:49
query by typing @media.
1:53
Now, the mobile first approach
uses the min-width media feature
1:58
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 viewport width that's
2:08
769 pixels or wider so I'm going to
set the min-width value to 769px.
2:13
The mobile first approach is the approach
we'll use from this point foreword.
2:18
So throughout the course, we're going
to add advanced layout styles and
2:24
overrides for
larger screens inside this media query.
2:27
I'm gonna start with one simple CSS rule,
so you can see the mobile first in action.
2:31
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
2:44
shared across all screen sizes and
devices.
2:48
And only those devices
that are 769 pixels or
2:51
wider will load the CSS
inside this media query.
2:55
So I want the container elements to
be 100% wide in small screens so
2:59
they should take up the full
width of the screen.
3:05
So back in my style sheet I'm
going to remove the width and
3:08
margin declarations from
the base container rule so
3:12
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 and
3:25
I'll paste in the width and margin
declarations inside this container rule.
3:33
And I'm also going to add a max
width value of 1,000 pixels so
3:39
that the layout container does not get any
wider than 1,000 pixels in larger screens.
3:43
I also want to give my
layout containers left and
3:50
right padding 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,
and I'll set the value to 1em, and
4:06
below that I'll set the padding-right
value to 1em as well.
4:14
So when I save my style sheet and
take a look at my layout in the browser,
4:19
you can see that there's some nice white
space around the content in small screens.
4:23
Now in a later video, we'll use the space
that opens up when the viewport is
4:29
769 pixels or wider to display
horizontal columns in our layout.
4:34
If I open my developer tools and
inspect any of the container devs,
4:40
I can see that the left and right padding
I applied to the container elements
4:46
makes the layout wider than
70% of the browser, and
4:52
it's going to make it wider than the 1,000
pixel max width I apply to the container.
4:55
Well that's because it's adding the 1em of
padding on both sides to its total width.
5:01
Now I want the layout's width to be
exactly 70% of the browser viewport and
5:10
the max width to be exactly 1,000 pixels.
5:15
So this is a quirky CSS box model behavior
5:19
you've seen before in
previous CSS courses.
5:22
So I'm going to use
the box sizing property
5:25
to prevent any padding in border
width values from expanding and
5:28
possibly breaking my layout containers
as I add more content to the page.
5:33
Back in my style sheet,
I'm going to create a new rule
5:38
up top in my base rules using
the universal selector so
5:40
that every element inherits
this box sizing declaration.
5:45
In the rule I'm going to type
the box sizing property and
5:49
set the value to border-box.
5:53
The value border-box forces the padding
and borders into the width and
5:57
height of the elements,
instead of expanding them.
6:02
So now my containers take up exactly
70% of the viewport width and
6:06
the max width will be
exactly 1,000 pixels.
6:11
Now I've posted a lot of helpful articles
and videos about mobile first and
6:14
the box sizing property in
the teacher's notes of this video.
6:20
Up next, I'll show you how to keep the
footer at the bottom of the page at all
6:23
times and remove any gaps between
the bottom of the viewport and the footer.
6:27
You need to sign up for Treehouse in order to download course files.
Sign up