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

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

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

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

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.

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