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

Posted by tapas chatterjee
tapas chatterjee
739 Points

@media screen and (min-width: 480px) { h1 { font-size:2.5em } } //not working says "check font-size"

My media querie is not working.. says check the font-size of h1 tag. which to me seems correct.

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

3 Answers

Enyel Cuadro
Enyel Cuadro
12,884 Points
Enyel Cuadro
Enyel Cuadro
12,884 Points

The problem is you placed the @media to the first line and you have the style h1 { font-family: Changa One, sans-serif; font-size: 1.75em; font-weight: normal; } This will overwrite the style of h1 inside @media

Try to place the @media... to the bottom/last line

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

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

Angela Visnesky
Angela Visnesky
20,927 Points
Angela Visnesky
Angela Visnesky
20,927 Points

You're missing a semi-colon after your font-size : 2.5em.

Enyel Cuadro
Enyel Cuadro
12,884 Points

correct me if I'm wrong but as I know semicolon ";" is only need when there's next style to add.

Crescens Kob
Crescens Kob
19,946 Points
Crescens Kob
Crescens Kob
19,946 Points

You're missing the semicolon";" as he said and try to put changa One within the quotes single one ........´Changa One ´