Bummer! You have been redirected as the page you requested could not be found.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Josh McMullin
Josh McMullin
3,012 Points

Getting my Media Query to Work

Greetings all,

I'm having trouble getting my media query I've written to work

The HTML is -

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable =no"> <title>Flower's by Tori</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> </head> <body> <div class="container clearfix"> <div class="grid_12"> <h1>Tori Patocchi Flower Design</h1> </div> <div class="grid_12"> <ul class="nav"> <li><a href="index1.html">About</a></li> <li><a href="portfolio2.html">Portfolio</a></li> <li><a href="contact1.html">Contact</a></li> </ul> </div><!--nav div--> <div class="grid_12"> <p>Eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br><br>Eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="grid_12"> <ul id="gallery"> <li class="flower"> <img src="img/flowers0.jpg" alt="flower">
</li> <li class="flower"> <img src="img/flowers1.jpg" alt="flower"> </li> <li class="flower"> <img src="img/flowers2.jpg" alt="flower"> </li> <li class="flower"> <img src="img/flowers3.jpg" alt="flower"> </li>

            <li class="flower">
                <img src="img/flowers4.jpg" alt="flower">   
            </li>
            <li class="flower">
                <img src="img/flowers5.jpg" alt="flower">
            </li>
            <li class="flower">
                <img src="img/flowers6.jpg" alt="flower">
            </li>
            <li class="flower">
                <img src="img/flowers7.jpg" alt="flower">
            </li>
        </ul>   
        <a href="#top" class="logo" id="anchor1" >Top</a>
    </div>
</div>
    <footer>

    </footer>

</body>

</html>

The CSS I've written for it is -

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

.grid_12 {
    width: 100%;
}

#gallery li {
    margin: .4% .5% .4% 26%;
}

#anchor1 {
    margin-left: 50%;
}

}

I can't seem to get the query to kick in. Any help would be appreciated.

Regards, Josh

3 Answers

Fred Sites
Fred Sites
11,151 Points
Fred Sites
Fred Sites
11,151 Points

your max-width : 976px; has a space between width and : .... I'm not sure if thats the problem but try removing it so it is max-width: 976px;

Josh McMullin
Josh McMullin
3,012 Points

Good call, I missed that but, unfortunately doesn't seem to be the problem.

Fred Sites
Fred Sites
11,151 Points

Hmm without seeing the page and what exactly is supposed to change I would start with an obvious change to verify the page is even recognizing your media query. At the top of the query put body {background-color: red;} . If that doesn't do anything after refreshing then you know it's not linked properly.

Josh McMullin
Josh McMullin
3,012 Points
Josh McMullin
Josh McMullin
3,012 Points

Yeah it appears not to be working. I tested that out. Not sure how to upload a screen capture on here.

Fred Sites
Fred Sites
11,151 Points

Hm are you sure the file structure is right and you're referencing the right css file in your link at the top of html? It could be something simple like your file is actually named main.css instead of style.css. Is any of the css working in the css file you have your media query in?

Josh McMullin
Josh McMullin
3,012 Points
Josh McMullin
Josh McMullin
3,012 Points

It could be I'm using the wrong call from HTML for my CSS I suppose but, the rest of my CSS appears to be working.