Zain Zain - 1 month ago 7
CSS 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?


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

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

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;