CODEWITHSUNDEEP
cssmedia-queries
user3474701
user3474701

Reputation: 15

Media Query Has Stopped Working

My media queries were working perfectly before but at some point they stopped working and I can't figure out what I did wrong to cause this. I have't changed anything specifically within the media query itself. I have been working on the CSS a lot so I think it is most likely something I did in there that caused it.

HTML

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VAMP</title>
<link href="styles.css" rel="stylesheet" type="text/css"> 
<link rel="stylesheet" type="text/css" href="nivo-slider.css">
<link rel="stylesheet" type="text/css" href="themes/default/default.css"> 
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
  <h1>VAMP</h1>

</div>
        <nav>
            <ul>
                <li>
                <a href="fashion.html">fashion</a>
                    <ul>
                        <li><a href="streetstyle.html">Street Style</a></li>
                        <li><a href="celebstyle.html">Celebrity Style</a></li>
                         <li><a href="runway.html">Off the Runway</a></li>
                    </ul>
                </li>
                <li><a href="beauty.html">beauty</a>
                    <ul>
                        <li><a href="makeuptut.html">Makeup Tutorials</a></li>
                        <li><a href="productrev.html">Product Reviews</a></li>
                        <li><a href="hair.html">Hair</a></li>
                        <li><a href="nails.html">Nails</a></li>
                    </ul>
                </li>
                <li><a href="music.html">music</a>
                    <ul>
                        <li><a href="topartists.html">Top Artists</a></li>
                        <li><a href="newmusic.html">New Music</a></li>
                    </ul>
                </li>
                <li><a href="entertainment.html">entertainment</a>
                <ul>
                        <li><a href="celebgossip.html">Celebrity Gossip</a></li>
                        <li><a href="celebinterviews.html">Celebrity Interviews</a></li>
                        <li><a href="moviereviews.html">Movie Reviews</a></li>
                    </ul>
                </li>

            </ul>
        </nav>



<div id="wrapper">

    <div id="left">
        <h2>Article</h2> 
            <p>hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  </p>
    </div> 

    <div id="middle"> 
        <h2>Article</h2>
            <p>hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg</p>
    </div> 

    <div id="right"> 
            <h2>Article</h2>
                <p>hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh         hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg hhajdad hajdaudh     hajdg  hhajdad hajdaudh hajdg  hhajdad hajdaudh hajdg hhajdad hajdaudh hajdg </p>

    </div>
    </div>

    <footer>
    Footer content goes here
    </footer>


    </body>
    </html>

CSS

@import url(http://fonts.googleapis.com/css?family=Josefin+Sans|Playfair+Display|Oxygen:700|Oxygen:300);  

/*----------GENERAL----------*/
* {
    padding: 0;
    margin: 0;
} 

ol li {
    margin: 0.5em 2em;
    padding-left: 0.5em;
}
 body {
    margin: 0 auto; 
    width: 960px;
    border: 1px solid #777;
    padding: 10px;
    font-family: 'Oxygen', sans-serif;
    font-weight:300;
} 
img {
    max-width:100%;
}
#container{
    width:960px;
}

/*----------HEADINGS----------*/
#header{
    border-bottom:white;
    background-image: url(image/fancy-pants.jpg);
    padding: 15px;
    text-align:left;
    letter-spacing: 6px;
}
#header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 50px;
    color:white;

    text-align:center;
}
h2{
    font-family:'Oxygen', sans-serif;
    text-transform:uppercase;
}

/*---------NAVIGATION---------*/
nav {
    font-family: 'Josefin Sans', sans-serif;

}
nav li {
    display:block;
    width: 25%;
    background-color: #000;
    position:relative;
    float:left;
    list-style:none;
}
nav a {
    text-decoration: none;
    font-size: 17px;
    color: white;
    padding:6pt 0;
    text-align: center;
    display: block;
    border-bottom: 3px white solid;
    text-transform:uppercase;
} 
nav a:hover{
    background: #d04576;
    border-bottom: 3px white solid;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
     -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
nav ul li ul {
    display:none;
    width:100%;
}
nav li:hover ul {
    display: block;
    width:100%;
}
nav li li{
    float:none;
    width:100%;
    background:
}
/*--------CONTENT COLUMNS-------*/

#wrapper{
    width:100%;
    overflow:hidden;
}
#middle{ 

    border-left: 1px solid #000;
    border-right: 1px solid #000;
}
#left, #right, #middle{
    width: 29%;
    float:left;
    padding:2%;
}


/*---------FOOTER---------*/
footer{
    width: 960px;
    margin: 0 auto 8px;
    color:#fff;
    background:#000;
    height:4em;
    text-align:center;
    padding:1%;
}

}
@media screen and (max-width: 960px) {
    body {
        width: 100%;
    }

    nav li {
        width:100%;
    }
    footer{
        width:100%;
    }
}

Upvotes: 1

Views: 157

Answers (1)

David Byman
David Byman

Reputation: 160

You have an extra } above the @media selector. Just get rid of that character and it should work fine.

}

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

Upvotes: 2

Related Questions