HTML How to Make a Website Responsive Web Design and Testing Write CSS Media Queries

Megan Weber
Megan Weber
25,295 Points

Stuck on Challenge 1

It says "Did you change the h1 font-size to 2.5em for devices larger than 480px?"

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

2 Answers

Jennifer Nordell
STAFF
Jennifer Nordell
Treehouse Staff

Hi there! Your code is just fine, but it's a little misplaced. Remember the cascading nature of CSS. Your rules that you are writing are being overwritten by the rules under them. To fix this, move your code to the bottom of the file. Also, it's generally a great idea to write media queries at the bottom of your CSS files for exactly this reason.

Hope this helps! :sparkles:

Austin Erb
Austin Erb
6,827 Points

Yep, don't listen to my response. This seems right lol

Austin Erb
Austin Erb
6,827 Points

Your code would work but it's 'wrong' according to how your answer gets graded. Remove 'screen and'.