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

yusuf Dibswazit
yusuf Dibswazit
1,522 Points

Bummer! Did you change the h1 font-size to 2.5em for devices larger than 480px? what am i doing wrong?

what am i doing wrong? i have followed each step accordingly

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;
}

1 Answer

jobbol
seal-mask
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 17,600 Points

Side note: Can we get a moderator to change this code challenge? This exact question appears on a daily basis.

You're changing the h1 style correctly, but further down your CSS there's another another h1 style that overwrites yours. Place your query right after the defaulting h1.

/* Default h1 */
/* small screens */
h1 {
  font-family: Changa One, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

/* Query h1 */
/* large screens */
@media screen and (min-width: 480px) {
 h1 {
   font-size: 2.5em;
   }
}
yusuf Dibswazit
yusuf Dibswazit
1,522 Points

Thank you, i'm such a noob, i should have remembered that code overrides one another in CSS. too much to comprehend at once, but i'm getting there.

Tim Knight
Tim Knight
28,888 Points

Thanks for helping with this Josh, unfortunately moderators can make changes to code challenges. I'd suggest reaching out to help@teamtreehouse.com and letting them know about the confusing item with your suggestion for correcting it.