My background was not showing, PLEASE HELP

Question

I want to make my website responsive but it's not responding to the min-height changes I want. I want it to change colors when it reaches a breaking point so can someone analyze my CSS and html and see what's wrong.

One note: This is frustrating me because my friend told me that adding this "<meta name="viewport" content="width=device-width" />" under my last link in my Head section it would resolve my problem... and it did!! So I don't know why that worked and the version that nick did didn't. So please someone help me!

Thanks, CSS

@media screen and (min-width: 480px) { body {background: navy; } } @media screen and (min-width: 660px) { body { background: darkgreen;} }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Dalexis Peguero | Designer </title> <link rel="stylesheet" href="normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,800italic,400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Dalexis Peguero</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html" >About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <h3>General Information</h3> <p>I am not currently looking for new design work, but I am available when I feel confident with my skills. </p> <p>Please reach me with email or facebook when it's not an emergency, but if you need an urgent consultation just call me.</p> </section> <section> <h3> Contact Details </h3> <ul class="contact-info"> <li class="phone"><a href="tel:555-5555">555-5555</a></li> <li class="mail"><a href="mailto:dalexispeguero@gmail.com">dalexispeguero@gmail.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@Dpeguero</a></li> </ul> </section> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon"></a> <a href="http://facebook.com/dalexisp"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a> <p>© 2014 Dalexis Peguero. </p> </footer> </div> </body> </html>

Answer 1 · 2014-10-17T22:34:27Z

October 17, 2014 10:34pm

Try this:

@media screen and (min-width: 480px) {
 body {
background-color: navy;
 }
}
@media screen and (min-width: 660px) { 
 body { 
background-color: darkgreen;
 }
}

If you can, paste your code to the forum using ``` before and after your code. This way we can have a good look at it.

Answer 2 · 2014-10-17T22:37:03Z

October 17, 2014 10:37pm

Hi Dalexis,

Media queries are implemented when the screen size changes. You have said you want to implement these changes for the min-height, but your media query states a min-width change.

Currently, your media query will make these changes to your background: Screen sizes with a width between 480px - 659px will display a navy background Screen sizes with a width from 660px and beyond will display a darkgreen background

I can not see any benefit from setting your media queries to a height related size (perhaps you made a typo and meant to say min-width instead of min-height?), as opposed to a width related size. However, to do this, you would simply change your media query to read:

@media screen and (min-height: 660px) { body { background: darkgreen; } }

Welcome to the Treehouse Community

Looking to learn something new?

dalexis peguero

dalexis peguero

My background was not showing, PLEASE HELP

2 Answers

Aaron Lafleur

Aaron Lafleur

Lisa Tan

Lisa Tan