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

HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Washington Bertrand
Washington Bertrand
1,562 Points

When 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; }

}

Himanshu Chopra
Himanshu Chopra
3,055 Points

Hii Washington. Can you please share your workspace? It would be more easy to debug If you can share your workspace.

3 Answers

Himanshu Chopra
Himanshu Chopra
3,055 Points

Hii 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
Himanshu Chopra
3,055 Points

Hii. 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
Washington Bertrand
1,562 Points

It 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
Washington Bertrand
1,562 Points

It worked!

Thank you so much Himanshu Chopra !!!! I will deffinately read on that right away! :D

Himanshu Chopra
Himanshu Chopra
3,055 Points

You are most welcome. Have fun Washington :)