Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

paul clear
paul clear
2,704 Points
Posted by paul clear
paul clear
2,704 Points

Having an issue with media query that seems to be correct but isn't...

@media screen and (min-width: 480px) { h1 { font-size: 2.5em; } }

Says to create a breakpoint for width larger than 480 pixels that sets h1 to font-size of 2.5 em... halp!

css/main.css 
@media screen and (min-width: 480px) {
  h1 {
  font-size: 2.5em;
  }
}


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

paul clear
paul clear
2,704 Points
paul clear
paul clear
2,704 Points

Josue Rodriguez once again, this is never mentioned in the entire 8 minute video lesson nor in the requirements of the challenge. did you run into anything of this sort? it's a bit annoying to have to deal with omitted issues or those taught "incorrectly" versus just not absorbing information or being ignorant to lessons. regardless, thank you again for your help & effort.

Josué Rodriguez
seal-mask
.a{fill-rule:evenodd;}techdegree
Josué Rodriguez
Front End Web Development Techdegree Student 17,924 Points
Josué Rodriguez
.a{fill-rule:evenodd;}techdegree
Josué Rodriguez
Front End Web Development Techdegree Student 17,924 Points

At 50sec he creates a new file called responsive.css and links it in the index.html after main.css In previous lessons I believe he covers how the cascade works. So for example if you have an h1 near the top of the CSS file but later on towards the bottom you add another h1 then that last one will overwrite the first one. So by adding the responsive.css after the main.css in the index document all responsive.css rules will come after. In the challenge you only have one document to work with so you add it at the end.

Yeah it's not covered exactly but based on the way things work I think it probably assumes you might figure it out I suppose.

Anthony Scott
PLUS
Anthony Scott
Courses Plus Student 9,001 Points
Anthony Scott
Anthony Scott
Courses Plus Student 9,001 Points

what's worse is that the error message we get has nothing to do with the actual issue