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 trialsean farrelly
1,614 Pointscreate 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
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
Treehouse TeacherHi 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!
Simon Coates
28,694 PointsSimon Coates
28,694 Pointsthe 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
Treehouse TeacherJennifer Nordell
Treehouse TeacherSimon 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:
This will also pass the challenge. You've added a line that's not explicitly required by the challenge.
sean farrelly
1,614 Pointssean farrelly
1,614 PointsHey Jennifer and thanks for the help .