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 trialAbhishek Rana
1,515 PointsCreate a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the h1 font-size to 2.5em.
it showing error
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
Jake Anderson
11,467 PointsAs Steven Parker said, you need to be sure to call the media query within your code. Some people argue that all of your media queries need to be at the bottom of your file, while others argue that it should be next the element you're changing with that query. The first method keeps all your responsiveness in one spot. The other keeps it next to the chunk that you're working on (more common in SASS/SCSS), making it so that you don't have to keep scrolling up and down in your code.
Whichever way you choose, just be sure the media query comes last in your set of declarations.
All that being said, I believe the code you're looking for can be seen below. You can see I'm calling the media query on the screen when the screen has a min(imum)-width of 480px. It is within those selectors that you can then place your h1 font-size change. Hope that helps.
@media screen and (min-width: 480px) {
h1 {
font-size: 2.5em;
}
}
Hariidaran Tamilmaran
iOS Development Techdegree Student 19,305 PointsAll you have to do is just add this code to the bottom:
@media screen and (min-width: 480px) {
h1 {
font-size: 2.5em;
}
}
Steven Parker
231,210 PointsSteven Parker
231,210 PointsIt doesn't look like you've written any code yet.
You need to create a media query at the bottom of the CSS file.