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

Fung How Lim
Fung How Lim
2,402 Points
Posted by Fung How Lim
Fung How Lim
2,402 Points

Adding padding 1em to base container rule instead of @media? Don't understand.

Hi,

Guil mentioned that padding on left and right of 1em is added to the base container rule, this ensures we have appropriate spacing when we view our page across different devices and screen sizes.

Wouldn't this also apply when we add padding of 1em on @media as well? How is adding 1em on @media and also adding on the base container rule, different?

Thanks! :)

Best, S

3 Answers

john larson
john larson
16,594 Points

if it goes in just the media query, it wont affect smaller screens. If you don't include the .container, the padding won't know where to be applied

john larson
john larson
16,594 Points
john larson
john larson
16,594 Points

I watched the video cause the way you asked the question sounded a little confusing. The 1em in the base rule will start at the mobile screen and remain (unless overridden in a media query) to whatever maximim size a screen goes up to. As far as if you put the 1em in a media query to take effect at 700px, that will not affect smaller screens.

Fung How Lim
Fung How Lim
2,402 Points
Fung How Lim
Fung How Lim
2,402 Points

Hi Larson,

Thanks for the effort. I should have stated my question clearly, apologies for making you watch it again.

Anyway, I am kinda confused with the padding. Why don't we include padding 1em into @media alone? Instead, Guil writes it in .container class, right on top. Hmm.

osman musse
osman musse
90 Points
osman musse
osman musse
90 Points

because when we took the margin:0 auto; width:70%; from the container and put it in the container in the @media the code will only happen when min-width:769px; . now padding-left: 1em; and padding-right: 1em; will happen