CSS CSS Layout Basics Controlling Layout with CSS Display Modes Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding

Piccia Neri
Piccia Neri
8,937 Points

Padding 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!

Steven Parker
Steven Parker
203,995 Points

It 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.

Cindy Lea
Cindy Lea
Courses Plus Student 6,484 Points

Try making the min-width:660px I have that in another class for cellphone size.

5 Answers

Steven Parker
Steven Parker
203,995 Points

Perfect snapshot. :+1: It's all clear now.

:point_right: 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.

:point_right: Just remove the stray brace to get your padding.

Joe Schultz
Joe Schultz
6,190 Points

Try using % instead of em in your padding.

Steven Parker
Steven Parker
203,995 Points

Why would that make it vanish on the mobile?

It would really help to see that snapshot

Piccia Neri
Piccia Neri
8,937 Points

Sorry 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
Piccia Neri
8,937 Points

VERY red face – I ALWAYS do silly stuff like this. Thank you Stephen.

Steven Parker
Steven Parker
203,995 Points

Glad to help. And that's Steven with a "v" :wink:

Happy coding!

Piccia Neri
Piccia Neri
8,937 Points

AHAHAHAH that's irony. Apologies, Steven! ;)