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 How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

Yolanda Guerra
Yolanda Guerra
3,290 Points

My 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

it's written there that page not found!

Emma Willmann
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Emma Willmann
Treehouse Project Reviewer

Can 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Stephen Printup
UX Design Techdegree Student 45,252 Points

Hey 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
Yolanda Guerra
3,290 Points

I 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Stephen Printup
UX Design Techdegree Student 45,252 Points

There 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
Yolanda Guerra
3,290 Points

Thank you Stephen that was the answer. I will be more careful in future.

Stephen Printup
seal-mask
.a{fill-rule:evenodd;}techdegree
Stephen Printup
UX Design Techdegree Student 45,252 Points

Something else that you may benefit from is opening a new workspace. Go to this link and click 'launch workspace':

http://teamtreehouse.com/library/how-to-make-a-website/responsive-web-design-and-testing/adding-breakpoints-for-devices

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.