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

Design

Melissa Pickett
Melissa Pickett
6,664 Points
Posted by 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,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 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
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,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 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
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,414 Points
Tobias Mahnert
Tobias Mahnert
89,414 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
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!!