Margin-top not changing according to media query

Question

I'm creating a products section for my website, and have been having trouble making it responsive, as media queries refuse to work. Here's my code:

HTML

<div id="products" class="products">
        <h3>Our Products</h3>
</div>

CSS

.products {
height: 30vh;
width: 80%;
margin-top: 15%;
margin-left: 10%;
}
@media only screen and (max-width: 600px) {


 .products {
        height: 30vh;
        width: 80%;
        background: #333;
        margin-top: 50%;
        margin-left: 10%;
        z-index: 2;
    }
}

Even though the margin-top for mobile is supposed to be 50%, it doesn't change when i change the value, any insights into what might be causing the problem.

See this answer https://stackoverflow.com/a/19038303/11676080 — guimauve, Nov 07 '20 at 14:41

score 2 · Answer 1 · answered Nov 07 '20 at 14:55

please add <meta name="viewport" content="width=device-width, initial-scale=1.0"> meta tag inside head tag & then check

.products {
height: 30vh;
width: 80%;
margin-top: 15%;
margin-left: 10%;
}
@media only screen and (max-width: 600px) {


 .products {
        height: 30vh;
        width: 80%;
        background: #333;
        margin-top: 50%;
        margin-left: 10%;
        z-index: 2;
    }
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div id="products" class="products">
          <h3>Our Products</h3>
  </div>
</body>

Margin-top not changing according to media query

1 Answers1