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 Write CSS Media Queries

Rhonda Bradley
Rhonda Bradley
2,010 Points

Where is responsive.css? Video didn't say how/where to add this code using main.css.

RE: code challenge for creating breakpoints.

We just learned how to add breakpoints in the responsive.css page. But the challenge wants me to add it in main.css. Am I missing something really obvious?

css/main.css
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;
}

2 Answers

Sam Baines
Sam Baines
4,315 Points

Hi Rhonda - for the challenge you have to write your css breakpoints in the file main.css to complete the challenge. In a real world project it doesn't actually matter where you put your breakpoints either - could be in your theme.css file or in a separate responsive.css file - it comes down to personal preference. Just make sure you link to files correctly in the head section of your html code. Hope this helps.

Rhonda Bradley
Rhonda Bradley
2,010 Points

Sam,

Your answer helps a lot. However, I'm baffled as to where in css.main I'd enter the breakpoint and give it a navy background. I'm going to take some guesses and see if it works out. Thanks very much for the info.

Rhonda Bradley
Rhonda Bradley
2,010 Points

update; I just added it to the bottom of the page, and it worked. Thanks again for filling me in on that.

Sam Baines
Sam Baines
4,315 Points

Hi Rhonda - glad I could help, it makes sense for you to put it further down your css file due to the nature and the way that the cascade works.