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 James Hollingworth
James Hollingworth
3,662 Points

Display none on h1 not working

Hi guys

I have a h1 class="mobileh1" in a <ul> saying web design and illustration. I can't seem to get display none to work as I only won't it to appear at my mobile breaking point.

You can see it here http://www.jameshollingworth.com/demo2.html

Can anyone help me? Is the problem that in is sat in a li? I am not feeling great so my mind can't work it out.

thanks

James

6 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

You will need to use media queries to accomplish this, which I don't see in your CSS.

But I have to ask, you have a mobileh1 and a desktoph1...what is the reason for this? Why not just have one that can scale up or down?

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

James Hollingworth -

Your CSS seems a little heavy for one page. You've got nearly 400 lines of CSS for one page. You might want to think about some re-organization and making it a little DRY-er

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

Could you give us a demo in codepen.

James Hollingworth
James Hollingworth
3,662 Points

I have never used code pen. I will have to look at that. I just can't hide the darn thing. I guess I probably should learn how to use it

Chase Lee
Chase Lee
29,275 Points

Here is what it should look like, (although I haven't seen you code), mobileh1{display: none;}

Hope that helps.

Chase Lee
Chase Lee
29,275 Points

mobileh1{display:none;}

James Hollingworth
James Hollingworth
3,662 Points
James Hollingworth
James Hollingworth
3,662 Points

because of the order of things in the html i can't, so i need to hide one and reveal one. I do have media quiries but its not working to hide the top h1

Sharon Walls
Sharon Walls
9,234 Points
Sharon Walls
Sharon Walls
9,234 Points

You shouldn't have more than one h1 on a page. Google won't like it, and it doesn't follow the correct heading taxonomy standards. What about outputting the appropriate header with an if statement?

Rick Rakin
Rick Rakin
6,531 Points
Rick Rakin
Rick Rakin
6,531 Points

Not the specific thing you asked for and I'm probably not the most qualified to be giving advice: but from what I understand of naming classes, you will run into trouble the way you have things labelled in the future for some of your divs. Like here:

<div class="d3-d6 box t-all box m-all box">

What the browser sees is the following classes: 

d3-d6
t-all
m-all
box

The space in between is a delimiter and box is declared redundantly.