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 trialDavid Curran
7,682 PointsHow create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the h1 font-size to 2.5em.
How to create a breakpoint for devices 480 pixels wide or larger. Inside the breakpoint, set the h1 font-size to 2.5em.
@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;
}
4 Answers
Joey Bruijns
Full Stack JavaScript Techdegree Graduate 47,878 PointsHi David,
Your code looks fine. Only I think itβs best practice to add media queries to the end of the stylesheet and not at the beginning. If you copy and paste your code to the end you should pass the challenge.
Samuel Molahloe
8,468 PointsHey David,
Try:
@media (min-width: 480px) { h1 { font-size: 2.5em } }
1) There is no need to add "screen and." 2) Because of the cascading nature of Style Sheets it's always a good idea to put your Media-Queries at the end, to override the current h1 settings when the view-point is equal to 480px or more.
Dan Burt
597 PointsIn my opinion the video that's shown prior to this question, doesn't lend itself to easily answering the code challenge that is asked following it.
We hear Nick talk us through screen resolutions and using the following CSS:
@media screen and (min-width: 480px) {
}
And there is no variance around this discussed in the previous video. There is nothing to indicate that we are to remove screen and
We also see Nick using a new responsive.css page, where the code is written at the top of the page. In fact, due to cascading, this needs to be at the bottom.
I appreciate that the code challenges are meant to test our learning, but this question seems to be a little oblique compared to the information we have been fed previously (and only seen for the first time).
Brian Foley
8,440 PointsThanks, Dan. Your answer really helped me with why I wasn't passing the challenge.