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!
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
Scott Dietze
Courses Plus Student 2,252 PointsMedia Queries
http://codepen.io/pen my code works here but on a new tab as a page it won't turn red at 768px
James Barnett
39,199 PointsWhat's the link to the code challenge you are stuck on?
13 Answers
Scott Dietze
Courses Plus Student 2,252 Pointsbody { font: 1.1em/1.5 sans-serif; } .wrap { width: 85%; margin: auto; } h1 { font-size: 3em; } p { margin-bottom: 1.5em; }
/* ========================================================================== Media Queries ========================================================================== */
@media screen and (max-width: 768px) { body { background: #FF6347; color: #FFF; } }
Scott Dietze
Courses Plus Student 2,252 Points
Scott Dietze
Courses Plus Student 2,252 Pointswhen i make my page smaller on Mozilla or chrome it won't work when I make the page 768px or smaller. Though it works perfectly in codepen
Scott Dietze
Courses Plus Student 2,252 Pointswhat css I posted is where i am in the video but nothing happens outside of codepen
James Barnett
39,199 PointsYour code works just fine outside of codepen.
Post the HTML & CSS you are working on outside of codepen.
Scott Dietze
Courses Plus Student 2,252 PointsNothing happened I tried that. I've tried both Firefox and Chrome. The only that is working for me is codepen.
Scott Dietze
Courses Plus Student 2,252 Pointsthat is the final project. Im still on the first step.
Scott Dietze
Courses Plus Student 2,252 PointsI now have the extension for chrome and there is no new colors for my page. What the heck!!
James Barnett
39,199 PointsThis works for me
<!DOCTYPE html>
<html>
<head>
<style>
.wrap {
width: 85%;
margin: auto;
}
@media screen and (max-width: 768px) and (min-width: 481px) {
body { background: #FF6347; }
}
@media screen and (max-width: 480px) {
body { background: #4682B4; }
}
@media screen and (min-width: 1000px) {
.wrap { width: 700px; }
}
</style>
</head>
<body>
<div class="wrap">
<h1>Hi There!</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus ante, luctus vel euismod ut, suscipit quis ligula. Vestibulum augue ante, semper sit amet congue non, faucibus sit amet lacus. Nam augue est, euismod ac gravida in, mattis ut felis. Ut tincidunt posuere laoreet.
</p>
<p>
Maecenas lobortis porttitor nisi, quis congue neque porta at. Donec interdum arcu eu ante semper nec venenatis ipsum dignissim. Vestibulum ultricies mi quis lectus suscipit fermentum. Aliquam commodo, neque in viverra ullamcorper, augue metus aliquet diam, sit amet condimentum lectus
</p>
</div>
</body>
</html>
Scott Dietze
Courses Plus Student 2,252 Pointsbody {
font: 1.1em/1.5 sans-serif;
}
.wrap {
width: 85%;
margin: auto;
}
h1 {
font-size: 3em;
}
p {
margin-bottom: 1.5em;
}
/* ==========================================================================
Media Queries
========================================================================== */
@media screen and (max-width: 768px) {
body {
background: #FF6347;
color: #FFF;
}
}
Scott Dietze
Courses Plus Student 2,252 Pointsone big thing i can tell is that my header isnt even the same location as in the video, mine is smaller and on the top left corner. His is closer to the middle and much larger.
Scott Dietze
Courses Plus Student 2,252 PointsFor goodness sake Can Someone Help Me!!!!!!! Nothing is working.
Scott Dietze
Courses Plus Student 2,252 Pointswell downloaded the safari browser and guess what. Not working there either. What a great surprise.
Scott Dietze
Courses Plus Student 2,252 PointsIs there a moderator on or someone who works for teamtreehouse that does css that can help me? I've been waiting for two days and no freaking help
Guil Hernandez
Treehouse TeacherHey Scott Dietze,
Your code snippet and CodePen are correct, and they're working exactly as they should be. Based on some of your comments, my only assumption is that your CSS isn't linking correctly.
Where are you writing your CSS? If it's in the HTML file, is your CSS inside a <style> tag like in James' example?
If your CSS is in an external file, check the path to your CSS file in the <link> tag. If you're not sure, please post a screenshot and I'll take a look.
Hope this help. :)
Scott Dietze
Courses Plus Student 2,252 PointsI am using an exact download from the project/video and I watch the video and follow along with you but when I decrease the window nothing happens in the color change. I don't do anything different from the video. The codepen works just as well but not on a new tab or even complete new window.
James Barnett
39,199 PointsJames Barnett
39,199 PointsYou didn't actually link to your codepen, try this guide http://css-tricks.com/forums/topic/a-guide-to-using-codepen-help-us-help-you/