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

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 seal-36
Josué Rodriguez
Front End Web Development Techdegree Graduate 24,118 Points
Josué Rodriguez
.a{fill-rule:evenodd;}techdegree seal-36
Josué Rodriguez
Front End Web Development Techdegree Graduate 24,118 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