My h1 is not resizing in media queries. What do I need to do to make the heading resize?

Try the following two things and see if either of them fixes the issue:

/*
(1) Change rem to em. rem may not be supported in the browser you are using.
Here is your coding:
*/
 h1 {
    font-size: 1rem;
  }

//Change to:
h1 {
  font-size: 1em;
}



/*
(2) Change your @media query syntax a bit. This may not make a difference at all:
Here is your coding:
*/
@ media (max-width: 1024px) {

}

//Change to:
@ media screen and (max-width: 1024px) {

}



Also, you are missing the closing bracket in your .main-header rule. Here is your coding:
@media (max-width: 768px) {

  .main-header {
  background: linear-gradient(#000 10%, transparent),
              linear-gradient(0deg, #fff, transparent),
              url('../img/morans-header4.jpg');

  h1 {
    font-size: 1rem;
  }

Hope this helps.

It appears that you could be missing a closing "}" for ".main-header" Let me know if that's it, thanks!

.main-header { background: linear-gradient(#000 10%, transparent), linear-gradient(0deg, #fff, transparent), url('../img/morans-header4.jpg'); }

h1 { font-size: 1rem; }

@media screen (max-width: 768px) {

.main-header { background: linear-gradient(#000 10%, transparent), linear-gradient(0deg, #fff, transparent), url('../img/morans-header4.jpg');

h1 { font-size: 1rem; }

.primary-content, .secondary-content { width: 100%; padding: 20px; border: none; }

.main-header { /* max-height: 380px;*/ padding: 50px 25px 0; }

.title { font-size: 1.3rem; border: none; }

.resorts, .tips { float: none; width: 100%; }

}

I think the closing bracket is there. When I change the background layers it works. Its only the heading that doesn't change. I don't see any CSS that is overriding it.

Are you using SASS? If not you're definitely missing the bracket here:

.main-header { background: linear-gradient(#000 10%, transparent), linear-gradient(0deg, #fff, transparent), url('../img/morans-header4.jpg'); }/* here */

You guys were right. It was missing. I think I fitted the closing bracket, but it still doesn't seem to be resizing.

http://port-80-v7zmtgs1u2.treehouse-app.com

https://w.trhou.se/fjyljob9a7

@media screen (max-width: 768px) {

.main-header { background: linear-gradient(#000 10%, transparent), linear-gradient(0deg, #fff, transparent), url('../img/morans-header4.jpg'); }

h1 { font-size: 1rem; }

.primary-content, .secondary-content { width: 100%; padding: 20px; border: none; }

I guess I don't know what SASS is. So if I am using it is shouldn't be lol. I am in the middle of the web design track, and I am trying to adjust the wildlife page just so I get reps. Just a rookie. About 3 weeks in.

I guess I don't know what SASS is. So if I am using it is shouldn't be lol. I am in the middle of the web design track, and I am trying to adjust the wildlife page just so I get reps. Just a rookie. About 3 weeks in.

I'd actually follow what Julie Myers said in the first answer. No worries, you'll learn what SASS is soon enough. You're doing great!