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

CSS CSS Basics (2014) Enhancing the Design With CSS Media Queries

Posted by Melody Schech
Melody Schech
2,977 Points

media queries

Create a media query that targets all devices when the viewport width is 1020px or less. Inside the media query, select the .main-header element. Set the background color to tomato and the text color to white.

3 Answers

Ste Royle
Ste Royle
9,538 Points
Ste Royle
Ste Royle
9,538 Points 
@media(max-width: 1020px) {
  .main-header {
    background: tomato;
    color: white;
  }
}

The first line in the above code tells the browser to only apply the css rules that follow when the view port (browser width) is equal to or less than 1020px wide (you are checking that the width isn't over 1020px). This acts as a wrapper around the rest of the code which is a normal css.

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

Hi Melody,

this code should get you through. if you have any questions, please let me know.

@media (max-width: 1020px) {
  .main-header {
  background-color: tomato; 
    color: white; 
  }
}

@media (max-width: 768px) {
  .title {
  font-size: 1.4rem; 
  }
  h1 {
  font-size: 5rem; 
  }
}

Cheers

Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points

Hi Tobias,

Can you give me an explanation about your code? The question is to set the media queries for a max width of 1024 or less no? Then why we need to add code about the media queries for max width of 768px? The question doesn't tell anything about this no? also nothing in the question about fonts, or am I wrong?

Thanks!

Tobias Mahnert
Tobias Mahnert
89,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 Points

Your not wrong, it's the second part of the code challenge ;)