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.

CSS

Nathan Nielsen
Nathan Nielsen
5,215 Points

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

https://w.trhou.se/ltz502uc9g

I have included a snapshot of my workspace.

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; }

8 Answers

Julie Myers
Julie Myers
7,627 Points

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; }
Nathan Nielsen
Nathan Nielsen
5,215 Points

@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.

Julie Myers
Julie Myers
7,627 Points

Your closing bracket is missing. Look again. :)

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 */
Nathan Nielsen
Nathan Nielsen
5,215 Points

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; }

Nathan Nielsen
Nathan Nielsen
5,215 Points

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.

Nathan Nielsen
Nathan Nielsen
5,215 Points

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!

You might ask why all those changes. Here's why:

"rem" isn't supported by all browsers.

and

Your media query won't be recognized without a specification such as "screen".