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

abhishek rajan
abhishek rajan
8,668 Points
Posted by abhishek rajan
abhishek rajan
8,668 Points

font size isn't changing

this is not working. every time its showing bummer did you change the font size of devices larger than 480px to 2.5em

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

Gabriel Kartak
Gabriel Kartak
5,399 Points
Gabriel Kartak
Gabriel Kartak
5,399 Points

Your media query is correct, but you must move it to the bottom of your page. This is because of the CSS cascade. Imagine you are the web browser, looking through your code. If you start at the top, everything works because the media query is first, but then as it continues to read your code by reading from top to bottom, the H1 size gets overridden to 1.75em. If you move your media query to the bottom of the page, it will read that last and override the size to 2.5em.

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

use this media query at the bottom of your page, not the top.