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

the size isnt changing

why the size is not changing?

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;
}
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 that media query at the bottom of your page.

Rana Melissa Baghdar
Rana Melissa Baghdar
9,425 Points

Media queries must be put at the end of the page :)