Modern layouts are built with mobile devices in mind from the start.

It's easier to build a mobile layout when you're first starting out because you

don't have to worry about any of the complex feature of wider desktop layouts.

Mobile layouts are usually simple one column layouts

because of the narrow screen width on a mobile device.

This is easier than creating a complex layout on the desktop first,

then trying to figure out how to arrange it for smaller screens.

When we use a mobile first layout approach with CSS, we serve the basic layout styles

and the minimal amount of code to style a page for a small mobile device first.

Then using media queries, we add break points which adjust the layout for

wider screens and devices.

In other words,

we define all the common layout styles before adding any media queries.

You can check the teacher's notes of this video for more resources and

videos about the mobile first approach.

I'm gonna start with a really simple example of mobile first layout.

So the current styles in the CSS apply to all browsers,

from phones to desktop computers.

However, on a small screen, the 70% width of the container

makes less sense because it's going to look too narrow on the screen.

So, I should expand the container so

that it fills the smaller screen of a mobile device.

So I'm going to define one media query in my CSS.

So first I'll select and copy one of the main comment flags in my CSS and

paste it at the very bottom of my style sheet.

And I'll change the text to media queries

because this is where I'll add any media queries.

So right below the comment flag, I'm going to create a new media

query by typing @media.

Now, the mobile first approach uses the min-width media feature

since you're building the layout up from narrow screens to wider screens.

I want this media query to target any device or viewport width that's

769 pixels or wider so I'm going to set the min-width value to 769px.

The mobile first approach is the approach we'll use from this point foreword.

So throughout the course, we're going to add advanced layout styles and

overrides for larger screens inside this media query.

I'm gonna start with one simple CSS rule, so you can see the mobile first in action.

So every browser, from phones to desktop, will load the CSS outside the media query.

These are the base rules that define the common styles

shared across all screen sizes and devices.

And only those devices that are 769 pixels or

wider will load the CSS inside this media query.

So I want the container elements to be 100% wide in small screens so

they should take up the full width of the screen.

So back in my style sheet I'm going to remove the width and

margin declarations from the base container rule so

I'm going to select both declarations and cut it out of the container rule.

Then I'm going to declare them inside the media query instead.

So inside the media query I'll create a new rule that targets container and

I'll paste in the width and margin declarations inside this container rule.

And I'm also going to add a max width value of 1,000 pixels so

that the layout container does not get any wider than 1,000 pixels in larger screens.

I also want to give my layout containers left and

right padding to separate the content from the left and right margins of the page.

So I'm going to add the padding properties in the base container rule,

since they'll be shared by all screens and devices.

So I'll add a padding-left property first, and I'll set the value to 1em, and

below that I'll set the padding-right value to 1em as well.

So when I save my style sheet and take a look at my layout in the browser,

you can see that there's some nice white space around the content in small screens.

Now in a later video, we'll use the space that opens up when the viewport is

769 pixels or wider to display horizontal columns in our layout.

If I open my developer tools and inspect any of the container devs,

I can see that the left and right padding I applied to the container elements

makes the layout wider than 70% of the browser, and

it's going to make it wider than the 1,000 pixel max width I apply to the container.

Well that's because it's adding the 1em of padding on both sides to its total width.

Now I want the layout's width to be exactly 70% of the browser viewport and

the max width to be exactly 1,000 pixels.

So this is a quirky CSS box model behavior

you've seen before in previous CSS courses.

So I'm going to use the box sizing property

to prevent any padding in border width values from expanding and

possibly breaking my layout containers as I add more content to the page.

Back in my style sheet, I'm going to create a new rule

up top in my base rules using the universal selector so

that every element inherits this box sizing declaration.

In the rule I'm going to type the box sizing property and

set the value to border-box.

The value border-box forces the padding and borders into the width and

height of the elements, instead of expanding them.

So now my containers take up exactly 70% of the viewport width and

the max width will be exactly 1,000 pixels.

Now I've posted a lot of helpful articles and videos about mobile first and

the box sizing property in the teacher's notes of this video.

Up next, I'll show you how to keep the footer at the bottom of the page at all

times and remove any gaps between the bottom of the viewport and the footer.