🤑 Join the Treehouse affiliate program and earn 25% commission!

🌟 Dreaming of a bright future? 🎓 Ask about the Treehouse Scholarship program! 🚀

Curious which AI tools Treehouse developers love? ⚙️ Check them out!

🫡 Treehouse for Military offers discounts to Veterans, service members and their families!

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 a minimal amount of code to style a page for a small, mobile device first. Then, using media queries, you add breakpoints that adjust the layout for wider screens and devices.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

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.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

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

You need to sign up for Treehouse in order to set up Workspace

Sign up