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
james mills
1,928 Pointshow come my header disappears when moving screen size?
im doing the responsive.css file and I have followed the video exactly as the author say's.but im getting different results.i loose the header everytime I adjust the screen size.i am using internet explorer,but I don't know what the issue is? can somebody please point me in the right direction as to where I might be going wrong please. thank you kindly james
this is my coding that im having problems with '''html nav { color:#000000; background: none; float: right; font-size: 1.125em; margin-right 5%; text-align: right; width: 45%; }
#logo { float: left; margin-left: 5%; text-align: left; width: 45%; }'''
5 Answers
Sander de Wijs
Courses Plus Student 22,267 PointsGreat James!
Sander de Wijs
Courses Plus Student 22,267 PointsIn the video Nick uses a couple of mediaqueries. In which mediaquery have you placed this code?
Jason Anello
Courses Plus Student 94,610 PointsHi James,
When you say that you lose your header is this at wide widths? Also, are you seeing your nav and logo but your header background isn't showing up?
Check that your header is floated left. This was done at an early part of the project I believe and perhaps you've done something to lose that.
james mills
1,928 Pointshi thank you for replying,Sander de Wijs i have place the mediaqueries in the responsive.css file, Jason Anello yes its when i change the width of the page.my nav and background all show untill i change width then i loose the header but the nav stays.i have gone back through the videos and made sure it floats left.but still i am having this problem when i try to make the page a desktop size window? sorry guys.
james mills
1,928 Pointsfound problem nav { color:#000000; background: none; float: center; ****HERE IS THE PROBLEM<I WAS FLOATING IT TO THE RIGHT,SO I HAVE CHANGED IT TO CENTER.PROBLEM SOLVED********** font-size: 1.125em; margin-right 5%; text-align: right; width: 45%;
thank you for your help guys.
Jason Anello
Courses Plus Student 94,610 PointsDoes it actually look the same as in the video?
center is not a valid value for the float property. This means the browser is ignoring this declaration and so your nav isn't being floated at all.
Earlier in the project the header was floated in anticipation of floating the logo and nav for the desktop.
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
Floating the header keeps it from collapsing when it contains floated children.
The css you posted for the nav and logo match the project so I think your problem is elsewhere. I would recheck that your header is floated left in main.css and make sure that you didn't remove that property value further down in the css.