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

HTML How to Make a Website Responsive Web Design and Testing Write CSS Media Queries

Kathryn Williamson
Kathryn Williamson
2,011 Points
Posted by Kathryn Williamson
Kathryn Williamson
2,011 Points

Why am I being asked to create a breakpoint in my main.css file?

The quiz is asking me to add a breakpoint to main.css file when the lesson only taught me to add a breakpoint to the new css file, responsive.css. There is only a main.css file provided so I don't understand where I am meant to create a breakpoint in the h1.

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;
  min-width: 480px;
}

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;
}
Bob McCarty
Bob McCarty
Courses Plus Student 16,618 Points
Bob McCarty
Bob McCarty
Courses Plus Student 16,618 Points

The quiz simply tests your media query knowledge. In this case, setting a breakpoint to alter the <h1> font size. Be sure to remember the cascading nature of styles, their importance, selector specificity and source order.

3 Answers

Ken Ortman
Ken Ortman
3,947 Points

The short answer is, you do it the same exact way as you would do it in the responsive.css file... except do it AFTER all of the other rules on main.css.

The reason is that the browser treats all of the css files as one long bunch of code. It doesn't care how many css files you make. It reads them (and applies the rules) one after the other in the order that you have them linked in the HTML.

You could take all of the code from responsive.css and paste it into the end of main.css instead and it would work exactly the same. The only reason for putting the code into a separate "responsive.css" file is just to make the css for the website more organized.

The browser only cares about what order the rules are in. It doesn't care how many css files the rules are broken up into.

Kathryn Williamson
Kathryn Williamson
2,011 Points
Kathryn Williamson
Kathryn Williamson
2,011 Points

Not helpful at all. I still do no understand the question. I know the quizes are meant to be simple but I am being asked to do something that was not taught. I am pretty sure I did not miss a lesson. We only added Media Query's to the responsive.css file, not the main.css file.

Kathryn Williamson
Kathryn Williamson
2,011 Points
Kathryn Williamson
Kathryn Williamson
2,011 Points

Thank you for your thorough answer, Ken. That helped me understand. Cheers!