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

Sign up for Treehouse

Using a Mobile First Approach

6:32 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 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