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
sean farrelly
1,614 Pointscreate a media query that targets all devices when the view port width is 1020 pixels or less. inside the media query ,
create a media query that targets all devices when the view port width is 1020 pixels or less. inside the media query , select the class main header element. set the background color to tomato and the text color to white.
/* Complete the challenge by writing CSS below */
@media
.main-header {
background-color: tomato;
font-color: white;
}
<!DOCTYPE html>
<html>
<head>
<title>Lake Tahoe</title>
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="style.css">
<meta name= "viewport" content="max-width 1020px">
</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>
4 Answers
sean farrelly
1,614 Points@media (max-width: 1020px) { .main-header { background: tomato; color: white; } }
henriquegiuliani
12,296 PointsUse @media screen and (max-width:1020px)
sean farrelly
1,614 Pointsam still not answering it rite should i do any thing to the html document its saying that i haven't selected the background color correctly ..
henriquegiuliani
12,296 Pointscss @media screen and (max-width:1020px) '''
And change FONT-COLOR to COLOR
sean farrelly
1,614 Pointsnope still wrong is this the code you want me to write @media screen and (max-width:1020px) .main-header { background-color: tomato; color: white; }
sean farrelly
1,614 Pointsthanks for your help any way i got it thanks .......
henriquegiuliani
12,296 PointsSorry, i wasn't able to answer you back since i was on the phone. Did it work?
sean farrelly
1,614 PointsNO but i figured it out their is the answer i wrote the code up there for the next person.