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
Aiden Mitchell
5,572 PointsHelp please!
Why won't this work?
@media screen and (min-width: 480px) {
body {
background: navy;
}
}
7 Answers
Alex Gervais
5,290 PointsCan you paste your index.html again?
Jeff Wilton
16,646 PointsIt should work - it works for me. Is this part of a coding challenge with specific instructions?
Aiden Mitchell
5,572 PointsNo. It is in my workspace.
Alex Gervais
5,290 PointsDo you have the code in style tags?
Aiden Mitchell
5,572 PointsThis is in my index.html file.
<link rel="stylesheet" href="css/responsive.css">
Alex Gervais
5,290 PointsMake sure it's between
if it's inline.
If not try adding type="text/css" to your link.
Aiden Mitchell
5,572 PointsThat does not change anything.
Aiden Mitchell
5,572 PointsLike this?
<link rel="stylesheet" href="type="text/css"css/responsive.css">
Alex Gervais
5,290 PointsLike this: ``` <link rel="stylesheet" type="text/css" href="css/responsive.css">
Can you post your file structure?
Aiden Mitchell
5,572 PointsWhat is the file structure?
Alex Gervais
5,290 PointsIt's just the way your folders look. So for example, you should have one main folder with the index.html file in it, and another folder called 'css' with your responsive.css file in it. Is this correct?
Aiden Mitchell
5,572 PointsYes.
Jeff Wilton
16,646 PointsTry it here, it might explain things clearer: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_media_example1
Jeff Wilton
16,646 PointsAlso, try doing a hard refresh in the browser with Ctrl+shift+R to make sure you are seeing your newest changes.
Aiden Mitchell
5,572 PointsThanks, but it didn't help.
Alex Gervais
5,290 PointsIs anything on that style sheet working or is just the media query broken? It's possible that it is working and your window is not at the right size to activate the change.
Aiden Mitchell
5,572 PointsI don't know. It is the only thing in that CSS file.
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Alex Gervais
5,290 PointsUnder the last closing brace type this:
``` body { background-color: red; }
And see what happens. The page should turn entirely red.
Aiden Mitchell
5,572 PointsNope. The page does not turn red.
Aiden Mitchell
5,572 PointsThis is my CSS now.
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
body { background-color: red; }
}
Alex Gervais
5,290 PointsOk we're getting somewhere :). Take everything out except for ```body { background-color: red; }
Aiden Mitchell
5,572 PointsStill no red.
Alex Gervais
5,290 PointsOk if the only thing in your css file is: ```body { background-color: red; }
then the file path 'css/responsive.css' in your html link tag is most likely wrong. Is your 'responsive.css' file in a folder called 'css'?
Aiden Mitchell
5,572 PointsYes, it is in my folder called css.
Alex Gervais
5,290 PointsCan you post your whole index.html file?
Aiden Mitchell
5,572 PointsThis is my HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aiden MItchell | Change This!</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Roboto|Open+Sans:400,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Aiden Mitchell</h1>
<h2>Change This!</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="img/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>placeholder</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>placeholder</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>placeholder</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>placeholder</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>placeholder</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="mailto:aidenjwylie@hotmail.com"><img src="img/mail.png" alt="Mail Logo" class="social"></a>
<p>© 2016 Aiden Mitchell.</p>
</footer>
</div>
</body>
</html>
Alex Gervais
5,290 PointsTry pasting this right into your head tag under the last link element and before the closing head tag:
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
Are all your files named correctly?
Aiden Mitchell
5,572 PointsStill does not change anything.
Aiden Mitchell
5,572 PointsIt just started working!
Alex Gervais
5,290 PointsDid it start working after you pasted in the above ^?
Aiden Mitchell
5,572 PointsYes, but it shows that code above my navigation.
Aiden Mitchell
5,572 PointsAiden Mitchell
5,572 PointsHere it is.
Alex Gervais
5,290 PointsAlex Gervais
5,290 PointsYou're pasting your css outside of the
tags. Remember in html, tags are like containers, you need to have an opening one and closing one, and all the content has to be between them. Basically, what's happening right now is that the browser is opening your web page and reading your index.html file line by line. It's hitting
and thinking "hey the css is going to start now" and it starts reading in "css mode". Then it hits the
tag and thinks "hey the css is stopping now because I hit the closing tag", so it goes back to 'html mode' and on the next line it hits your css outside of the style tags as html, this is why it's showing up in your web page, because it thinks the css is html.
Delete what is inside of your
tags and paste in-between them ``` body { background: red; }
Delete all the styling outside of your style tags as well and then refresh the page and tell me what happens. :)Aiden Mitchell
5,572 PointsAiden Mitchell
5,572 PointsIt is now red no matter the size of the window.
Here is my HTML now.
Alex Gervais
5,290 PointsAlex Gervais
5,290 PointsPerfect. Now copy the text from inside the
tags and paste it in your responsive.css file. Then delete the
tags and the styling inside from your index.html so there's no css on it anymore.
Then refresh and see if the background of index.html is still red.
Aiden Mitchell
5,572 PointsAiden Mitchell
5,572 PointsThanks for all your help, but it was a spelling error in the name of my CSS file. It works now. Thanks again.