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

Adam Kmet
Adam Kmet
1,039 Points
Posted by Adam Kmet
Adam Kmet
1,039 Points

@media screen and (min-width:480px) { h1 { font-size:2.5em; } } whats wrong with this code please?

why cant i set font style 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;
}
Christopher Cifonie
Christopher Cifonie
4,705 Points
Christopher Cifonie
Christopher Cifonie
4,705 Points

Make sure you media query comes at the end of your css.

a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #000;
}

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

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

Also for h1's font family make sure you put quotes around a font name that has a space in it like this 

font-family: "Changa One", sans-serif;

3 Answers

Fraser Edwards
Fraser Edwards
6,307 Points
Fraser Edwards
Fraser Edwards
6,307 Points

You have a rule setting the h1 font-size to 1.75em further down in your style sheet. Because CSS prioritises rules further down the style sheet, your media query is being cancelled out by this rule. If you move your media query to the bottom of the sheet it should work.

Adam Kmet
Adam Kmet
1,039 Points
Adam Kmet
Adam Kmet
1,039 Points

Thank you very much it worked :)

Larry Coonrod
Larry Coonrod
5,041 Points
Larry Coonrod
Larry Coonrod
5,041 Points

You have to remember the cascading nature style sheets..i.e. a declaration will override a previous declaration with the same selector. In this case, if you look the CSS styles, you'll see an h1 with a font-size of 1.75em after media query. Think about where you want your media query to avoid this problem so the h1 font-size:2.5em only occurs with a min-width screen size of 480 pixels.