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
imke melles
5,942 PointsMy Nav-items and Logo "fall" out of the header space into the page space when 660px min-width.
The other modifications work just fine:The green border stripe is sitting above the Logo and Navigation items - the left-right floating and font sizes work.
imke melles
5,942 PointsSorry, but what do you mean by "post the HTML and CSS" - I looked at the markdown Cheat sheet but it didn't help me at all - format which code?
Ted Sumner
Courses Plus Student 17,967 PointsYou would copy and paste the code here with the formatting before and after according to the Markdown Cheatsheet. But what may work better is to post the snapshot of the workspace. To do that, open the workspace and click the camera icon in the upper right corner. Create and open the snapshot. Copy the URL and post it here. We can then open your project and see what is happening. I think it is something called margin collapse, but I don't remember that happening at this stage of the project. I need to see and play with the code some to tell you for sure.
imke melles
5,942 Pointshttps://w.trhou.se/erc7l8ocif - this is the URL from the snapshot I took. Thanks for your explanation of how to go about it, I appreciate it.
4 Answers
Ted Sumner
Courses Plus Student 17,967 PointsThe problem you are having is called margin collapse. It is a known property in CSS that is usually good, but can cause issues like this. There are Treehouse courses that discuss the problem. I think it may be addressed in your course in the next few videos. Add this code block to your responsive.css file after the header styling:
header:after {
content:"";
display:table;
clear:both;
}
This is known as clearfix and should be kept in your bag of tricks because it comes up often in my experience. Here is an article that explains the issue in detail.
Keep coding.
imke melles
5,942 PointsThank you!!
Ted Sumner
Courses Plus Student 17,967 PointsYou are welcome.
Rishit Shah
4,975 Pointstry adding the following code to your responsive.css
@media screen and (min-width: 660px) {
nav { overflow:hidden; }
}
imke melles
5,942 PointsThank you for your help - unfortunately that code didn't solve the problem. But I got the problem fixed.
Jan Chalupa
3,323 PointsAnd how did you fixed that problem imke melles? My problem is that the Contact link fall down below About link. And that clearfix didn't help.
imke melles
5,942 PointsFor me adding
header:after { content: ""; display: table; clear: both; }
after the last header styling of the 660px modifications in the responsive.css worked.
Brian James
1,100 PointsIs anyone else having the problem of the nav "wrapping" with contact falling underneath About? This seems to occur for only at a width of 661px to 668px then it seems to go back inline..
Ted Sumner
Courses Plus Student 17,967 PointsPlease post a Workspace snapshot. I recommend a new forum post and tag me in the post. You can do that by typing my name in [] and copying and pasting the hyperlink url in my name here and enclosing it with () with no spaces between the ] and ( like this ](
I am not sure what you are seeing, so I cannot help with just your post.
Ted Sumner
Courses Plus Student 17,967 PointsTed Sumner
Courses Plus Student 17,967 PointsPlease post the HTML and CSS. The Markdown Cheatsheet link on this page shows how to format your code.