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 trialmfod
1,708 Pointscreate a breakpoint for devices over 480 pixels wide or larger. Inside the breakpoint, set the h1 font to 2.5em.
I cannot figure out why this is incorrect.
@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;
}
6 Answers
lucybeck
6,055 PointsHi Mariam, Take the @media. Section of code and put it at the end of put it at the end of the page.
beatagozdziaszek
9,945 PointsI have just realised how important it is to put CSS code in a right place. I wrote the right code put placed it on the top which CSS could not apply (it was overridden by a different code) Make sure you know where to write you code.
DJ Millward
6,651 PointsIt looks right to me also. Which course is this ? I'm asking incase it's Sass; as then you'd use the 'breakpoint' function.
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 PointsDJ Millward if you look at the top right corner of the page you can click on the "View Challenge" button and you'll be directly taken to the course and the part of the course Miriam is referring to.
lucybeck
6,055 PointsThank you Nejc.
rachaelallison
9,521 PointsThis is the code I'm using, and for some reason it's not working. Any tips?
@media screen and (min-width 480px) { h1 { font-size: 2.5em; } }
rachaelallison
9,521 Pointsjust noticed I'm missing a colon between min-width and 480px!
Phew. These little details get me sometimes!
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 PointsNejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Pointslucybobeck has the answer you are looking for.
Media queries always come at the end of your code. You must be careful with CSS (!Cascading Style Sheet), because if you look at the name you are hinted that styles are applied in cascading order, meaning:
If you apply a media query to your CSS and the parsing of the rule is matching that style will be applied, but if you wrote another rule for the same tag, the rule that comes second is applied no matter what kind of condition is declared in the media query.
So the best way is to firstly style your tags and then use your media queries to apply styles when specific conditions are met.
lucy deserves a "Best answer", but I just explained a bit so you get the feeling why this answer is the best one.
Happy Coding!
Roslynn Tellvik
2,790 PointsRoslynn Tellvik
2,790 PointsI'm having the same issue. I attempted to place the code at the end of the page to start with but the Code Challenge screen only allows me to place my cursor (via mouse or keyboard actions) as far down as the 14th line from the top. So I am effectively unable to complete the challenge. Has anyone had a similar issue and found a work around? Thanks.