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

Posted by Louis Espinoza
Louis Espinoza
1,196 Points

Need help solving a simple media query problem.

I am just learning about media queries and I thought I'd practice on my own with my own text editor. I simply set the heading element to 1.75em and then tried to change the font size to 72px using media query and it doesn't seem to work. However if I were to target the body element and set the background color then it works just fine. 

<!DOCTYPE html>
<html>
  <head>
     <title></title>
     <link rel='stylesheet href="css/reponsive.css">
     <style>
       h1 {
         font-size: 1.75em;
      }
     </style>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

@media screen and (min-width: 680px) {
  h1 {
    font-size: 72px;
  }
}
izzy goldman
izzy goldman
12,542 Points

Try:

  1. youre missing a Quotation mark and it shgould be double Quotation mark. <link rel="stylesheet" href="css/reponsive.css">

    1. youre inline styles overiding the media query. either: move your<link href to be under the style tag OR give it a class or id

1 Answer

dragos busuioc
dragos busuioc
24,908 Points
dragos busuioc
dragos busuioc
24,908 Points

Inline style overide every external stylesheet.So h1 will be always 1.75em.Delete inline style and put the rule inside an external stylesheet.Before media query.And close the quotation mark.