Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Basics Getting Started with CSS Layout Using a Mobile First Approach

Ryan Rassoli
Ryan Rassoli
3,365 Points
Posted by Ryan Rassoli
Ryan Rassoli
3,365 Points

Mobile Content with Margin

If the content is set to a width of 70% and the margin is set to 0 and auto with a max-width of 1,000px, how does the content expand to the very edge of a mobile screen if the width is set specifically to 70%?

1 Answer

Jacob Jackson
seal-mask
.a{fill-rule:evenodd;}techdegree
Jacob Jackson
UX Design Techdegree Student 7,833 Points
Jacob Jackson
.a{fill-rule:evenodd;}techdegree
Jacob Jackson
UX Design Techdegree Student 7,833 Points

Hey Ryan!

Great question, I can see where this would be confusing.

You'll notice in the video that he adds these inside a media query of a min-width of 769px.

This means that the width of 70% and max-width of 1000px only apply on larger screens.

The way the box-sizing is set to border-box for everything outside of that media query (when the viewport size is less than 769px), will make the content expand to the full width of the screen.

You can read more about how this works in one of the included links that Guil attached to this lesson. https://blog.teamtreehouse.com/box-sizing-secret-simple-css-layouts

Hope this helps! Keep up the great work! -Jake