CODEWITHSUNDEEP
htmlcss
zxc
zxc

Reputation: 415

why doesn't my @media queries work?

I am trying to use media queries to change how my website looks at different sizes... Currently it doesn't work:

html {background:#333;}
body {background:#F0F1F2;}
html, body {
  width:100%;
  min-height:100%;
}
* {
  margin:0;
  padding:0;
  font-family:'bl-reg', sans-serif;
  font-size:12px;
  color:#333;

  z-index:inherit;
}
h1, h2, h3, h4, h5, h6, p, a, li, tr, th, td {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor:default;
}
a {
  font-family:'bl-reg', sans-serif;
  font-weight:inherit;
  font-size:inherit;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
}
a:hover {
  text-decoration:underline;
}
.margin-center {
  margin:auto auto;
}
.pull-left {
  float:left;
}
.pull-right {
  float:right;
}

div.navbar {
  height:48px;
  overflow:auto;
  background:#FFF;
}
div.navbar > ul {
  list-style-type:none;
}
div.navbar > ul li.brand,
div.navbar ul li.link {
  display:inline-block;	
}
div.navbar > ul li.brand {
  font-weight:bold;
  font-size:14px;
}
div.navbar ul li.link {
  font-size:12px;
}
div.navbar > ul li a {
  display:block;
  padding:15px;
}
div.navbar > ul li.link a {
  display:block;
  padding:16.5px 15px;
  color:rgba(51,51,51,0.75);
}
div.navbar > ul li.link a:hover {
  color:rgba(51,51,51,1);	
}
div.navbar > ul li a:hover {
  text-decoration:none;
}
}
@media screen and (min-width: 975px) {
  div.navbar > ul {
    width:975px;  
  }
}
@media screen and (max-width: 974px) {
  div.navbar > ul {
    width:100%;
  }
  div.navbar > ul > div.collapse {
    position:absolute;
    margin-top:48px;
  }
}
<html>
  <head>
    <title>Welcome</title>
    <link rel="stylesheet" type="text/css" href="./default.css" />
    <link rel="stylesheet" type="text/css" href="./fonts.css" />
    <script src="./jquery-1.11.1.min.js"></script>
    <script src="./global.js"></script>	
  </head>

  <body style="display:none;">
    <div class="navbar">
      <ul class="margin-center">
        <li class="brand pull-left">
          <a href="#">stack</a>
        </li>
        <div class="collapse">
          <li class="link">
            <a href="#">Hello</a>
          </li>
          <li class="link">
            <a href="#">Hello</a>
          </li>
          <li class="link">
            <a href="#">Hello</a>
          </li>
          <li class="link pull-right">
            <a href="#">World</a>
          </li>
        </div>
      </ul>
    </div>
  </body>
</html>

Why doesn't opening the website with my browser width larger than 975px force the width to div.navbar > ul and such. And then when it is smaller than 975px force the widthto 100% and the other things within max-width: 974px

Upvotes: 0

Views: 110

Answers (3)

Manjunath Siddappa
Manjunath Siddappa

Reputation: 2157

First of all you are missing <!DOCTYPE html>

you are applying display:none in body, please remove it

Media queries CSS

@media screen and (max-width: 974px) {

    html {
        background:yellow;
    }

}

I have updated the fiddle(resize the window to take effect media queries)

http://jsfiddle.net/kbdvm5j6/12/

Upvotes: 0

Gajen
Gajen

Reputation: 466

are you using display:none in body? if you're using it mistakenly please remove that from your HTML code.

Upvotes: 0

Bradley
Bradley

Reputation: 98

Make sure your that you declare that your using html 5 and have the meta tag for the viewport. 

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    </head>
    <body>
    <p>jargin</p>
    </body>
    </html>

Upvotes: 1

Related Questions