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

Posted by nicholasmartin2
nicholasmartin2
7,172 Points

Adding Breakpoints for Devices: Body background color remains white after breakpoints.

Hello everyone. I'm working my way through "Adding Breakpoints for Devices" and have hit a snag. Below, I've pasted the code for the breakpoints used in the lesson. Once I've expanded my browser (Chrome) beyond 480px, the body of my pages remain white; however, when expanded to full screen mode (beyond 660px), a small border will appear on the left and right sides of the page that appears dark green. The body still remains white. Any thoughts on this? I'm happy to share the main.css code in a separate comment, if that might help. Thanks!

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

1 Answer

Navid Mirzaie Milani
Navid Mirzaie Milani
6,274 Points

@Nicholas Martin when i just created a workspace here at Threehouse and resizing my window i see a green and a blue page. The CSS aboce says when the window is 660px or higher the background should be green , and if the window is between 480 and 660 it will be the background navy.

Just check it you will see. If you have other questions ask :). Goodluck.

nicholasmartin2
nicholasmartin2
7,172 Points

@Navid Mirzaie Milani Thanks for the response! Unfortunately, even with the correct coding that's already been entered, the media queries appear to be doing nothing on multiple browsers. I'm now left with a white background. I'm wondering if there's an error with my main.css? I've included the code below.

/*****************************************
GENERAL
*****************************************/

body {
  font-family: 'Open Sans', sans-serif;

}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  background: white;
  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:'Roboto', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: 800;
  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 ul {
  list-style: none;
  margin: 0 10px; 
  padding: 0;
  display: inline-block
}

nav li {
display:inline-block
}

nav a {
  font-weight: 800;
  padding: 15px 10px;


}

/*****************************************
FOOTER
*****************************************/
footer {
  font-size: 0.75em;
  text-align: center;
  clear:both;
  padding-top: 50px;
  color: #ccc;
  margin: 20px 0 0;
}

.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: .75em;
  color: #bdc3c7;
}

/*****************************************
PAGE: ABOUT
*****************************************/
.profile-photo {
  display: block;
  max-width: 150px;
  margin: 0 auto 30px;
  border-radius: 5%;

}



/*****************************************
PAGE: CONTACT
*****************************************/
.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: .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.twitter a {
  background-image: url('../img/twitter.png');

}

.contact-info li.mail a {
  background-image: url('../img/mail.png');

}

/*****************************************
COLORS
*****************************************/

/* sitebody */
body {
  background-color: #fff;
  color: #999  
}

/* green header */
header {
  background: #6ab47b; /* green header */
  border: #599a68;
}


/* nav background on mobile */
nav {
  background: #599a68
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
color: #6ab47b
}

/* nav links */
nav a, nav a:visited {
  color: #fff
}

/* selected nav links */
nav a.selected, nav a:hover {
  color: #32673f
}