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

i don't see the error of the reponsive code in css

i write a code in css but am always receiving the message " we are having the communication problem". below is the code

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

10 Answers

I don't see any obvious problems with your code. If the error you're seeing has "communication problem" then it may just be a network problem - a problem with workspaces trying to communicate to Treehouse servers.

Just to be sure though, can I get you to copy and paste the exact error message?

hey ! specify what property you are talking about to your browser.

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

i want to Create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, i want to set the body background to the color navy.

the code I gave you works for me, it will change your background color to navy

still it cant work, i am receiving the error message that there was a communication problem

on workspace ?

Yes

pass your whole css file

a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: Changa One, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

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

.profile-photo {
  display: block;
  margin: 0 auto 30px;
      max-width: 150px;
  border-radius: 100%;
}

.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;
}
@media screen and (min-width: 480px) {
  body {
    background-color: navy;
  }
}

Hi Attain,

Fixed markdown for the posted code. If you're curious about how to add markdown like this on your own, checkout this thread on posting code to the forum . Also, there is a link at the bottom called Markdown Cheatsheet that gives a brief overview of how to add markdown to your posts.

Yeees it works now, thank you so much. so it was a network problem