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.

Nathan Nielsen
5,215 PointsMy h1 is not resizing in media queries. What do I need to do to make the heading resize?
I have included a snapshot of my workspace.
8 Answers

Julie Myers
7,627 PointsTry 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.

dannyavery
Courses Plus Student 801 PointsIt 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
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
7,627 PointsYour closing bracket is missing. Look again. :)

dannyavery
Courses Plus Student 801 PointsAre 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
5,215 PointsYou 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
@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
5,215 PointsI 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
5,215 PointsI 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.

dannyavery
Courses Plus Student 801 PointsI'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!

dannyavery
Courses Plus Student 801 PointsYou 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".
dannyavery
Courses Plus Student 801 Pointsdannyavery
Courses Plus Student 801 PointsIt 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; }