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

Posted by Rick Thomas
Rick Thomas
758 Points

Logo / Header adjustment problems.

I believe I have copied the code as stated in the videos. Now when I try and adjust the header to look better on bigger devices, it messes up. It looks like this https://gyazo.com/59bc539cfafb025b315f491ee8049cc2

My index page code: http://pastebin.com/TKyqePEZ My main css: http://pastebin.com/WUcFAkTx My responsive css: http://pastebin.com/MrUTidk5

I have been trying for hours to fix it, It seems to be something do with the float on the #logo every time I get rid of the float, I see my header background. Thanks.

1 Answer

James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

Hi Rick,

I just added clear: both to #gallery and it seemed to fix it

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
    clear: both;
}

When you float elements inside a container (e.g li's inside a ul), you should use clear: on the container to prevent it from collapsing. This article provides a good explanation.

Hope this helps :)