Zain Zain - 1 month ago 8
HTML Question

Body media query doesn't work

I have a navigation bar which has padding to allow content to display under the navigation bar. For mobiles I want to lessen the padding but the media query doesn't seem to work. Any ideas to why?

Example:



body{
padding-top: 70px;
}
p.t{
color: white;
background-color: black;
top: 0px;
position: absolute;
}
@media only screen and (max-width: 767px) {
.body {
padding-top: 0px;
}
}

<body>
<p class="t">
This is my pretend navbar woo.
</p>
<p>
hello
</p>
</body>




Answer Source

You're doing .body instead of body. By using .body, the CSS is searching for an element with class="body", instead of an element <body>. Simple fix:

@media only screen and (max-width: 767px) {
    body {
        padding-top: 0;
    }
}