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

Sign up for Treehouse

Using a Mobile First Approach

6:21 with Guil Hernandez

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

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.

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