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

Increasing the size of the level one header in media queries

I'm having trouble solving this last task in the challenge (Responsive Design > Content Defined Breakpoints) It says "Now, within that same media query, add the appropriate CSS to increase the size of the level one header to 2.75em." I've tried solving it on my own for an hour now, so I decided to ask for some help.

So far it looks like this:

@media screen and (max-width: 705px) { #intro img { display: none; } .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 {width: 100%;}}

I tried "h1 { font-size: 2.75em; } But it didn't work.... If anyone could help that would be greatly appreciated, thanks :)

14 Answers

I figured it out.

#intro img { display:none;} h1 {font-size: 2.75em;}

Changed to:

#intro img { display:none;} 
#intro h1 {font-size: 2.75em;}

Thanks for the link to OpenStudy. It was interesting, but I disagree with that philosophy. It is based on the assumption that people are dishonest (which, some are, but that's another discussion). I prefer to think positively and that people are honest.

Most people, as I did, spend a good deal of time trying to solve the problem. By the time you go looking for help, you need a solution, not hints, especially not some of the hints above that were not helpful and only compounded the problem. I eventually figured it out based on the comments above, but that process was not helpful, I would have achieved the same result with an answer. Which is why I posted the answer. I was hoping to save somebody the same frustration I encountered from some of the misleading comments.

I personally need a solution to see where I went wrong and learn from my mistake.

I respect the Open Study philosophy and I love the Treehouse program, so I have removed my answer and given a hint to which answer helped the most (which is misleading, because that user posted an answer later that didn't work for me).

Remember, you can cheat, but you won't learn and ultimately the cheater suffers. It's about personal responsibility and holding yourself accountable for your actions. Society can't do that for you.

James Barnett
James Barnett
39,199 Points

Dustin Brown -

> By the time you go looking for help, you need a solution, not hints, especially not some of the hints above that were not helpful and only compounded the problem.

Code challenges are like the homework of Treehouse. If you ask a TA in college for the answer to a problem on an assigned problem set they probably won't tell you. If they do they will probably mark that one as incorrect because it wouldn't be your own work, which is fine because that's an accurate representation of the current issues you are having with the material. I hope that makes sense.

James Barnett
James Barnett
39,199 Points

Raeed -

I couldn't help but notice that you went straight from the Build a Basic Website course to the Build a Responsive Website course, this skips over several foundational courses.

To view the order in which these were designed to be taken, look at the Learn HTML & CSS Learning Adventure

Nick Zachary
Nick Zachary
6,816 Points

Hi Raeed, I'm not sure where you went wrong, but it may be in your structure. Here's a code that works.

@media screen and (max-width : 705px){ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%; } .grid_2>img{ display:none; } h1{ font-size:2.75em; }

}

I think you missed a curly bracket because you did not nest inside your media queries, try this

@media screen and (max-width: 705px) { .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%; }

intro img {

display: none; }

h1 { font-size: 2.75em; }

}

Unfortunately its still not working :( I even tried the code Nick shared

Nick Zachary
Nick Zachary
6,816 Points

That's strange Raeed, I copy and pasted my code into the tasks. I completed it with no problems :S

I'm having troubles with this as well: Here is my code exactly: @media screen and (max-width: 705px) { .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6 { width: 100%; }

#intro img { display:none;} h1 {font-size: 2.75em;} }

I keep getting "Did you update the size of the levl 1 header to 2.75em?"

Berline Patience
Berline Patience
2,525 Points

I am new to teamtreehouse, thanks for the help. I was stuck for days.

@Jonah Thanks Jonah :) I didn't know you had to add the "#intro" before "h1" I really appreciate it!

Gagandeep Virk
Gagandeep Virk
19,741 Points

Hi Everyone I have figured it out the solution try this

intro img { display: none; }

.grid_4 h1 { font-size: 2.75em; }

Jonah's answer helped me the most.

James Barnett
James Barnett
39,199 Points

Remember our goal here on the forum is give help not answers, next time try giving an explanation and/or a hint instead.

Need more explanation on the distinction check this out.

Again, I disagree. A forum is like a study group. You don't have a TA in your study group. Whenever I have been a part of a study group, someone usually comes up with the answer and shares it with everyone else. This is when the discussion comes in "How did you come up with that answer?"

Could you imagine being in a study group where someone says "I know the answer, but I'm not going to give it to you, but I will give you a hint". Haha! I don't think that person is going to be in the study group for long.

So, are code challenges really like homework? Or are they more like open book tests? If they are test, shouldn't you have some practice first? After all, you don't go to a lecture and then take a test at the end of the lecture.

Maybe there should be homework/worksheet or something to practice what you learn? Then you take a test that you cannot retake, like in college?

This question is misleading. The question states "Now, within that same media query, add the appropriate CSS to increase the size of the level one header to 2.75em.".

It'd be great if this could be re-worded to say font-size rather than size. The highlighting if the word 'size' really threw me off even though this is the second time I'm doing this course.