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
Piccia Neri
8,937 PointsPadding disappears in mobile view
Hi there, for some reason even though I followed the steps exactly, the page loses all margins and paddings when below the 769px breakpoint. I have tried adding padding to the media queries but nothing changes. here's my CSS currently:
/* ---- Layout Containers ---- */
.container { padding-left: 1em; padding-right: 1em; }
.main-header { text-align: center; padding-top: 1.5em; padding-bottom: 1.5em; background: #3acec2; margin-bottom: 30px; }
.main-footer { text-align: center; padding: 2em 0; background: #d9e4ea; }
/* ================================= Media Queries ==================================== */
@media (min-width: 769px) {
.wrap {
min-height: calc(100vh - 89px);
}
.container {
width: 80%;
max-width: 1150px;
margin: 0 auto;
}
.name, .main-nav li { display:inline-block; }
.name { width: 240px; } }
Thank you!
Cindy Lea
Courses Plus Student 6,497 PointsTry making the min-width:660px I have that in another class for cellphone size.
5 Answers
Steven Parker
231,269 PointsPerfect snapshot. 
It's not padding, it's the margin that is changing.
Your media query applies a width constraint (80%) to the container div's, along with auto margins to center them when the window size is 769 pixels or more.
When the window is narrower than that, there is no margin and the element fills the entire window. I would guess this is intentional, to make use of more of the available space on smaller screens.
Now about the padding, if you look above the "Layout Containers" comment, there is a stray close brace (}) on the line with display: block;. That causes the real closing brace to invalidate the following rule, so the padding is never applied.
Just remove the stray brace to get your padding.
Joe Schultz
6,191 PointsTry using % instead of em in your padding.
Steven Parker
231,269 PointsWhy would that make it vanish on the mobile?
It would really help to see that snapshot
Piccia Neri
8,937 PointsSorry everyone, been super-busy so that's why I haven't replied. The point is that I have been following along the instructor and changed nothing that could affect the padding. So why should I have to change the padding? Why does it look different from the instructor's? Here's the snapshot (if I've understood correctly how to post it!) https://w.trhou.se/gvuyn6h3hr
Piccia Neri
8,937 PointsVERY red face – I ALWAYS do silly stuff like this. Thank you Stephen.
Steven Parker
231,269 PointsGlad to help. And that's Steven with a "v"
Happy coding!
Piccia Neri
8,937 PointsAHAHAHAH that's irony. Apologies, Steven! ;)
Steven Parker
231,269 PointsSteven Parker
231,269 PointsIt would help to see all the code, and be able to try it. Just use the snapshot function in the workspace and provide the link to it.