Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Design

Melissa Pickett
Melissa Pickett
6,664 Points

How to Make a Website - Responsive Web Design & Testing: Code Challenge - Write CSS Media Queries, Challenge Task 1 of 2

I'm working through the 'How to Build a Website' course. Up to now, I haven't had any trouble with the code challenges; however, I'm trying to complete the 'Write CSS Media Queries' challenge in the 'Responsive Web Design & Testing' section, and I'm running into an issue. (https://teamtreehouse.com/library/how-to-make-a-website/responsive-web-design-and-testing/write-css-media-queries)

As far as I can tell, I'm following the same guidelines outlined in the instruction video when it comes to adding a responsive media query; however, I keep getting an 'incorrect' in the associated code challenge.

How do I figure out what I'm doing wrong?

3 Answers

Tobias Mahnert
Tobias Mahnert
89,413 Points

Hello Melissa,

i think the catch is that nick used max width and for the challenge u need min-width for the @media rule. check the code below, maybe it helps you.

@media (min-width: 480px) {
  h1 {
  font-size: 2.5em
  } 
}
@media (min-width: 660px) {
  h2 {
  font-size: 1.75em
  } 
}
Melissa Pickett
Melissa Pickett
6,664 Points

Hi Tobias,

Thanks for the suggestion. In the video, he does say to use min-width, which is what I tried in the challenge; it doesn't work. I've tried using the media query with the 'screen and' code, and without; I've tried putting 'min-width' in parenthesis and without parenthesis.

I can't figure out how to get my screenshot to show up on the post - the Markdown Cheatsheet instructions are not working for me either. Apparently, today is not my day when it comes to coding. :/

Tobias Mahnert
Tobias Mahnert
89,413 Points

Did you try to copy and paste my suggestion from my markdown at the end of the code in the challenge? If you want to put your code in a markdown, type it like this.

Wrap your code with 3 backticks (```) on the line before and after. If you specify the language after the first set of backticks, that'll help us with syntax highlighting.

      ```html
      <p>This is code!</p>
      ```
Melissa Pickett
Melissa Pickett
6,664 Points

Ah. Okay, copying and pasting your code works; however, I'm still confused.

Why does the code not have a semi-colon after the min-width and font-size codes?

Your code:

      @media (min-width: 480px) {
  h1 {
  font-size: 2.5em
  } 
}
      ```

Why not:
 ```html
      @media (min-width: 480px;) {
  h1 {
  font-size: 2.5em;
  } 
}
      ```
Tobias Mahnert
Tobias Mahnert
89,413 Points

whups, I forgot the semi-colons in the fontsize rules, normally there would be an display error in the HTML, however the (min-width: 480px) is a media rule and follows a different syntax then the CSS code. I assume it's because the media rules where implemented later in CSS3 then the original Css

Melissa Pickett
Melissa Pickett
6,664 Points

That's my problem! I added a semi-colon after the media rule, where there shouldn't have been one. Thanks so much for your help!!