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 trial
MUZ140127 Munyaradzi Muduka
10,337 Pointscss,stage 6 challenge task 2 of 2
Next, create a new media query that targets all devices when the viewport width is 768px or narrower. Inside the media query, target the .title element and set the font-size to 1.4rem. Finally, target the h1 element and set its font-size to 5rem.
/* Complete the challenge by writing CSS below */
@media (max-width: 1020px){
.main-header{
background-color: tomato;
color: white;
}
@media (max-width: 768px){
.title{
font-size: 1.4rem;
}
.h1{
font-size: 5rem;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Lake Tahoe</title>
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header id="top" class="main-header">
<span class="title">Journey Through the Sierra Nevada Mountains</span>
<h1 class="main-heading">Lake Tahoe, California</h1>
</header>
<div class="primary-content">
<p class="intro">
Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
</p>
<a class="callout" href="#more">Find out more</a>
</div><!-- End .primary-content -->
</body>
</html>
Jamie FitzHenry
16,232 PointsHi, I'm putting in the same code as you Bianca;
@media (max-width: 1020px){ .main-header{ background-color: tomato; color: white; } }
@media (max-width: 768px){ .title{ font-size: 1.4rem; } .h1{ font-size: 5rem; } }
However I keep receiving "did you specify the correct font size for the h1 element".
Can't see where I'm going wrong!
Any help appreciated.
Garrett Ayers
2,005 Pointsin the h1 element you do not need the ( . ) befor the h1 element.
7 Answers
MUZ140127 Munyaradzi Muduka
10,337 Pointshie jamie you should remove the dot on the left side of your h1 element it should look like this h1{font-size: 5rem}} not .h1{font-size: 5 rem;} try this: @media (max-width: 1020px){ .main-header{ background-color: tomato; color: white; } }
@media (max-width: 768px){ .title{ font-size: 1.4rem; } h1{ font-size: 5rem; } }
Tapiwa Chinembiri
6,285 Pointssharp sharp it works hey
shezazr
8,275 PointsYour CSS is wrong, you have one media inside another media... just move it out
Bianca Negron
9,486 PointsYou need a closing curly brace in the first media query:
@media (max-width: 1020px){ .main-header{ background-color: tomato; color: white; } }
@media (max-width: 768px){ .title{ font-size: 1.4rem; } .h1{ font-size: 5rem; } }
MUZ140127 Munyaradzi Muduka
10,337 Pointsthank you bianca,it worked
Bianca Negron
9,486 PointsNo problem! :)
Jamie FitzHenry
16,232 Points@MUZ140127 muduka Thank you! Don't know how I didn't see that!
MUZ140127 Munyaradzi Muduka
10,337 Pointsyou are welcome
darrin allen
7,775 PointsI didnt get the 2nd objective
Huy Vo
4,632 PointsI removed the dot in front of the h1 element and it works. Can somebody explain me why??
William Sanders
11,396 PointsIt worked because the . before h1 indicates that it's a class. h1 wasn't a class like .title was.
MUZ140127 Munyaradzi Muduka
10,337 PointsMUZ140127 Munyaradzi Muduka
10,337 Pointsthank you. i am receiving this error message "did you specify the correct font size for the h1 element.am stuck there, i don't know what to do next.