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

sean farrelly
sean farrelly
1,614 Points
Posted by sean farrelly
sean farrelly
1,614 Points

create a break point for devices 480 pixels wide or larger. inside the break point, set the h1 font size to 2.5em.

create a break point for devices 480 pixels wide or larger. inside the break point, set the h1 font size to 2.5em

css/main.css 
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 (min-width: 480px;)
  }
h1 {
  min-width: 480px;
  font-size: 2.5em;
}

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi sean farrelly! You're not that far off. You're missing an "and", you have a runaway semicolon, and your curly braces are misplaced. Take a look at what you need:

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

The open curly brace you have above your media query should be deleted. Note that there's no semicolon after the 480px. The body of the media query itself has to go inside a pair of open curly braces. Then every element/id/class we target inside that should also have its own set. Keep in mind there should always be the same number of open curly braces as closed curly braces. If you have 3 open and 2 closed something has gone awry. Hope this helps! :sparkles:

Simon Coates
Simon Coates
28,694 Points
Simon Coates
Simon Coates
28,694 Points

the min-width inside the h1, may be the product of confusion. It doesn't seem to be required as part of the challenge. That it matches the min-width of the media query doesn't seem like coincidence.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Simon Coates You're right, it could be. But although not required by the challenge it will pass the challenge. Simon is saying that you could write it this way:

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

This will also pass the challenge. You've added a line that's not explicitly required by the challenge.

sean farrelly
sean farrelly
1,614 Points
sean farrelly
sean farrelly
1,614 Points

Hey Jennifer and thanks for the help .