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 trialConnor Baker
586 PointsAfter the first breakpoint, create a second breakpoint for devices 660 pixels wide or larger. Inside the breakpoint, set
I am stupid and cant figure this out ): HELP?
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 and ( min-width: 480px ) {
h1 {
font-size:2.5em;
}
}
@media screen and ( min-width 660px ) {
h2 {
font-size:1.75em;
}
}
16 Answers
Micael Francisco
2,419 PointsBecause of the cascading nature of css ,you need to add the 660 media query before the 480 media query, I'm just a beginner but I think that's the solution to the problem, worked for me.
Angel Fneich
Front End Web Development Techdegree Student 2,571 Points@media (min-width: 480px){
h1 {
font-size: 2.5em;
}
}
@media (min-width: 660px) {
h2 {
font-size: 1.75em;
}
}
Ben Ragsdale
14,187 Pointsadd colon after min-width
min-width: 660px
donald kaiser
9,736 PointsI'm doing the exact code above and it keeps telling me "Did you change the h2 font-size to 1.75em for devices larger than 660px?
Here's my code:
@media screen and ( min-width 660px ) {
h2 { font-size:1.75em; }
}
Micael Francisco
2,419 PointsHi, pay attention to your code writing , read it very carefully.
@media screen and ( min-width: /* Forgot to add the " : " without quotes.*/ 660px ) {
h2 {
font-size: 1.75em; }
}
Connor Baker
586 PointsI thought so too but it doesnt work i get errors
Connor Baker
586 Pointsomg duh xD
Mahdi Hamdi
5,802 PointsCheck the bracket.
donald kaiser
9,736 PointsI'm doing the exact code above and it keeps telling me "Did you change the h2 font-size to 1.75em for devices larger than 660px?
Here's my code:
@media screen and ( min-width 660px ) {
h2 { font-size:1.75em; }
}
Briggs Tomlinson
1,016 Pointsyou have to make another @media tag
Learning coding
Front End Web Development Techdegree Student 9,937 PointsSame here, this code doesn't work:
@media screen and ( min-width: 660px ) { h2 { font-size:1.75em; } }
How should I solve this?
Thanks.
Nishita Parikh
907 Points@media screen and ( min-width: 660px ) {
h2 { font-size:1.75em; }
}
mwangi gitau
9,894 Pointsmake sure there is a space between the word "and" the first bracket.
Patricia Gallego
781 PointsHas someone the answer? I am writing the same structure as in task 1 and is not working.
@media screen and ( min-width: 480px ) {
h1 { font-size: 2.5em;}
@media screen and ( min-width: 660px ) {
h2 { font-size: 1.75em;}
Bima Ardi
Courses Plus Student 2,173 PointsI also got the same Oh no, bummer thing... until I change the code like this :
@media screen and ( min-width: 660px ) {
h2 { font-size: 1.75em;}
}
@media screen and ( min-width: 480px ) {
h1 { font-size: 2.5em;}
I know.. it is so weird........
Terence Williams
Full Stack JavaScript Techdegree Student 2,687 PointsSame problem here... but can't get an answer :( sigh
Volodymyr Rusynyk
5,725 Points@media screen and (min-width: 660px) { h2 { font-size: 1.75em; }
Stuck on it! still got error : Bummer! Did you change the h2 font-size to 1.75em for devices larger than 660px?
Volodymyr Rusynyk
5,725 Points} }
- this was the reason. Solved
Andrew Fox
2,730 Pointsdzfnjhgjnbfdhyytegyjgbhyj
maali2
12,539 Pointsmaali2
12,539 Pointscode looks fine.