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
Yolanda Guerra
3,290 PointsMy web page is not working to responsive css
I do not know what is wrong I followed the video and the code on my responsive css file is @media screen and (min-width: 480px){ body { background: navy; } }
@media screen and (min-width: 660px){ body { background: purple; } }
I added the file to index.html like this
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
but when I go to preweview and change the web browser window nothing happens. Can anyone tell me what I am doing wrong? I don't know if my file can be accessed by anyone else but here is the URL at the top of my workspace http://teamtreehouse.com/workspaces/1744672
Emma Willmann
Treehouse Project ReviewerCan you copy and paste your html and css files? There is a markdown cheatsheet below the comment box that shows you how to do this.
Stephen Printup
UX Design Techdegree Student 45,252 PointsHey Yolanda-
I just entered in your code in my own workspace and it works great. Great job! I think you may need to refresh the browser (after saving of course) for the changes to take effect. Let me know how that works for you.
-Stephen
Yolanda Guerra
3,290 PointsI did not get a chance to get back on until today the problem still exists I do not know why my stuff isn't working. I am copy and pasting my files.
HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Yolanda Guerra | Production Expert</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400italic,700italic,400,700,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>Yolanda Guerra</h1> <h2>Production</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>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending Mode.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>80 Styles of glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips using Photoshop brushes.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repitition.</p> </a> </li> </ul> </section> <footer> <a href="http://www.ask.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://www.ask.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Yolanda Guerra.</p> </footer> </div> </body> </html>
MAIN CSS /******************** GENERAL **********************/ body{ font-family: 'Open Sans', sans-serif; }
wrapper{
max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
img{ max-width: 100%; }
h3 { margin: 0 0 1em 0; }
/******************** HEADING **********************/ header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center; margin: 0; }
h1{ font-family:'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
h2{ font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
/******************** NAVIGATION **********************/ nav{ text-align:center; padding: 10px 0; margin: 20px 0 0; }
nav li { display:inline-block; }
nav a {
font-weight: 800;
padding: 15px 10px;
}
nav ul{
list-style: none;
margin: 0 10px;
padding: 0;
}
/********************
Footer
**********************/
footer{
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50pxone;
color: #ccc;
}
.social-icon{ width: 20px; height: 20px; margin: 0 5px; }
/******************** PAGE PORTFOLIO **********************/
gallery{
margin: 0; padding: 0; list-style: none; }
gallery li{
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
gallery li a p {
margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7;
}
/******************** PAGE ABOUT **********************/ .profile-photo{ display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
/******************** PAGE CONTACT **********************/ .contact-info{ list-style: none; padding: 0; margin: 0; font-size: 0.9em; }
.contact-info a{ display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }
.contact-info li.phone a{ background-image:url('../img/phone.png'); }
.contact-info li.mail a{ background-image:url('../img/mail.png'); }
.contact-info li.twitter a{ background-image:url('../img/twitter.png'); }
/******************** COLORS **********************/ body { background-color: #fff; color: #999; }
header { background: #6ab47b; border-color: #599a68; }
nav { background: #599a68; }
h1, h2 { color: #fff; }
a{ color: #6ab47b; }
nav a, nav a:visited { color: #fff; }
nav a.selected, nav a:hover { color: #32673f; }
RESPONSIVE CSS @media screen and (min-width: 480px){ body { background: navy; } }
@media screen and(min-width: 660px){ body { background: purple; } }
Thank you in advance for your help, it is much appreciated.
2 Answers
Stephen Printup
UX Design Techdegree Student 45,252 PointsThere was one thing that I changed to make it responsive that I didn't remember when I replied to your post because I didn't think it mattered, but I just ran it and it does. There needs to be a space between the 'and' in your second @media and the opening parenthesis. So it should read:
@media screen and (min-width: 660px){ body { background: purple; } }
not
@media screen and(min-width: 660px){ body { background: purple; } }
I hope this helps. Remember to save it then refresh. Also, are you asking for advice on the other code that has been modified from the workspace or just the responsiveness?
Yolanda Guerra
3,290 PointsThank you Stephen that was the answer. I will be more careful in future.
Stephen Printup
UX Design Techdegree Student 45,252 PointsSomething else that you may benefit from is opening a new workspace. Go to this link and click 'launch workspace':
From the new workspace you can modify the color and incrementally change your code to see which line of your modified code creates the problem. I've been opening the new workspace and vetting your code, however your latest post includes code that is not in the workspace or is changed.
Mohd Maqbool Alam
Full Stack JavaScript Techdegree Student 5,715 PointsMohd Maqbool Alam
Full Stack JavaScript Techdegree Student 5,715 Pointsit's written there that page not found!