Search code examples
htmlcssmedia-queries

Css media not working, what is the problem?

This question has been asked a million times, and i have followed the answers but it still doesnt work. what am i doing wrong? I have in the head

<meta content="width=device-width, initial-scale=1" name="viewport" />

and here is the intial css

    .navbar-nav{
          float:right;
          font-family: 'Playfair Display', serif;
      }

here is the media query:

@media only screen and (max-width: 800px) {
  .navbar-nav{
    float:right;
    font-family: 'Playfair Display', serif;
    font-size: 50px;
  }
}

i added the font size so i can visually identify if it works, but id doesnt. what am i doing wrong?

here is my head:

  <meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>Stuff</title>
<meta name="description" content="Simplified Bootstrap template with sticky menu">
<link href="css/main.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css? 
family=Knewave|Merriweather|Playfair+Display" rel="stylesheet">
<link href="css/sticky-menu.css" rel="stylesheet">
<script src="js/form.js"></script>
Solution

  • If your display's width is larger than 800px, your media query wouldn't match.

    Try verifying by setting the max-width to a very large number like 10000 and you'll likely see the changes applied.