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
Washington Bertrand
1,562 PointsWhen expanding my browser, my header and nav section disappears completely.
When I expand my browser, my header and nav section disappear completely and all thats left is a thin green line. When I highlight this area with the cursor, I can see that everything is there but the Green color is gone. Help Please!
@media screen and (min-width: 480px) {
/************************************* TWO COLUMN LAYOUT **************************************/
#primary { width: 50%; float: left; }
#secondary { width: 50%; float: right; }
/************************************* PAGE: PORTFOLIO **************************************/
#gallery li { width: 28.3333%; }
#gallery li: nth-child(4n) { clear: left; }
/************************************* PAGE: ABOUT **************************************/
.profile-photo { float: left; margin: 0 5% 80px 0; }
}
@media screen and (min-width: 686px) {
/************************************* HEADER **************************************/
nav { 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%; }
h1 { font-size: 2.5em; }
h2 { font-size: 0.825em; margin-bottom: 20px; }
}
Washington Bertrand
1,562 PointsHey Himanshu Chopra . Thanx for your reply. Is this it?
3 Answers
Himanshu Chopra
3,055 PointsHii Washington. Well I have to admit that my last solution wasn't perfect I would rather suggest you to use overflow:auto; in your header css.
header {
background: #6ab47b;
border-color: #599a68;
overflow: auto;
}
Well this happens when you are making float based layout. See you are using floats for your #logo and nav so the floated elements doesn't let your parent element expand. It happens when you are using floats so you can use the trick I wrote above to let you parent container take it's height. there are couple of more tricks for this but the overflow:auto is the best one. for understanding this more clearly I would suggest you to read this http://www.quirksmode.org/css/clearing.html blog.
Hope this works good for you:)
Himanshu Chopra
3,055 PointsSorry for replying late.
Himanshu Chopra
3,055 PointsHii. User display: inline-block for your #logo instead of float:left when media query is set to @media screen and (min-width: 660px)
Hope this works for you.
Washington Bertrand
1,562 PointsIt did help to bring the color back in the header. When I reload the browser, everything looks perfect when its full screen size. When I make the browser window smaller everything is fine. But when I grab it to expand it once again, the nav section seems to move down into the body. Im still confused as to why this happens.
Washington Bertrand
1,562 PointsIt worked!
Thank you so much Himanshu Chopra !!!! I will deffinately read on that right away! :D
Himanshu Chopra
3,055 PointsYou are most welcome. Have fun Washington :)
Himanshu Chopra
3,055 PointsHimanshu Chopra
3,055 PointsHii Washington. Can you please share your workspace? It would be more easy to debug If you can share your workspace.