Issues with Media Queries

Question

As the title says I seem to be encountering issues with my css and I cant for the life of me figure out why. Everything looks correct to me, so I decided to bring it to stack overflow to get some help. Here is my code below

    header {
  height: 70px;
  width: 100%;
  background: url("../img/header.svg");
  background-size: cover; }

  header #logo {
    float: left;
    display: inline-block;
    margin: 10px 0 0 50px;
    width: 112px;
    height: 50%; }

  header nav {
    float: right;
    margin-right: 50px;
    display: inline-block;
    height: 70px;
    width: 435px; }

    header nav a#pull {
      display: none; }

    header nav ul {
      padding: 0;
      margin: 0 auto;
      width: 600px;
      height: 70px; }

      header nav ul li {
        line-height: 70px;
        margin: 0 15px;
        display: inline;
        list-style: none; }

        header nav ul li a {
          text-decoration: none;
          text-transform: capitalize;
          font-family: Helvetica;
          font-size: 20px;
          color: #ffffff;
          line-height: 35px; }

@media (max-width: 584px) {
  header {
    height: 200px; }

    header #logo {
      display: block; }

    header nav {
      width: 100%;
      height: 80px;
      margin: auto; }

      header nav ul {
        width: 100%;
        display: block;
        height: auto;
        margin: auto; } 
    }

and this is my html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="css/normalize.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <title></title>
</head>
<body>

<Header>
    <img id="logo" src="img/caseywoelfle.svg" alt="Logo"/>
    <nav class="clearfix">
        <ul class="clearfix">
            <li><a href="index.html">home</a></li>
            <li><a href="about.html">about me</a></li>
            <li><a href="portfolio.html">portfolio</a></li>
            <li><a href="contact.html">contact</a></li>
        </ul>
        <a href="#" id="pull">Menu</a>
    </nav>
</Header>

<div id="homepage">

    <div id="banner">
        <img id="bannerLogo" src="img/caseywoelfle.svg" alt=""/>

        <p id="wd">web development</p>

        <a id="fomLink" style="display:block" href="about.html">

            <div id="fom">
                <p>find out more</p>
            </div>
        </a>

</div>

<footer>

</footer>

</body>
</html>

The main issue I am facing is my media query is not happen at the amount of pixels I specified. On some browsers it happens before, and on others it happens to late after.

possible duplicate of [Media Queries: How to target desktop, tablet and mobile?](http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) — Venkat.R, Jun 10 '15 at 20:28

Mardzis · Accepted Answer · 2014-12-29T12:17:39.067

2

You need to add media type like print or screen. Read more here, about media query here.

@media screen and (max-width: 584px)

edited Dec 29 '14 at 12:17

answered Dec 29 '14 at 12:11

Mardzis

760
1
8
21

I did that and I discovered something while testing it. My browser google chrome only does it after the window size is 523, however one this is to note in the developer panel when I moused over body it was the 583 pixels. Interesting, hmmmm. – Dec 29 '14 at 12:17
Yes, because you set the maximum width (`max-width`) of the window. If you want to apply the rules in before of this size use the `min-width` in media query. – Mardzis Dec 29 '14 at 12:19

score 0 · Answer 2 · answered Dec 29 '14 at 12:16

You need to make sure that you are providing the mediatype as part of the query. This describes the selected output which could be screen or print for instance.

So in your code you need to add the following: @media screen and (max-width: 584px) {

I created a fiddle here: http://jsfiddle.net/2rgxfmak/

Issues with Media Queries

2 Answers2