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 trialMerel Maas
737 PointsCreate a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the h1 font-size to 2.5em.
fx
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
Khambrel Davis
24,572 Points@media (min-width: 480px) {
h1 {
font-size: 2.5em
}
}
@media (min-width: 660px) {
h2 {
font-size: 1.75em
}
}
A breakpoint is just a media query. What I did here was create a media query targeted for devices wider than 480 pixels. The second challenge (also listed) asked for a media query for devices wider than 660 pixels.
Federica Lamberti
567 Pointswhat's wrong with this code?
@media screen and (min-width: 480px) { h1 { font-size: 2.5em; } }
Khambrel Davis
24,572 Pointsremove the 'screen and' because the challenge is just for screens with a minimum width of 480px.
Ryan Brooks
1,774 PointsI didn't get this one to work until I scrolled all the way down to the bottom of the css file (which was a pain) and put the code there.