This course will be retired on July 12, 2021. We recommend "Mobile-First CSS Layout" for up-to-date content.
Using a Mobile First Approach6: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.
70%allows the container's width to grow and shrink with the browser window size. The
1000pxestablishes 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.
- Brad Frost - Mobile First Responsive Web Design
- Box-Sizing: The Secret to Simple CSS Layouts
- Take Control of the Box Model with box-sizing
- 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.
You need to sign up for Treehouse in order to download course files.Sign up