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

General Discussion

Posted by Robbie Thomas
Robbie Thomas
31,093 Points

My site

I don't know if I'm allowed to do this, but I'll ask anyway and see if a MOD comes on by to tell me that I did wrong.

Anyways, I redid my website and for some reason, while viewing from 819px or fewer: my two nav links 'Main Site' (which is suppose to be just 'Main') and 'Blog/News' are on the same line, in fact, the 'Blog/News' is ontop of 'Main Site.' This occurs only with my blog.html and articl.html and not the index.html (I don't have contact available, you'll see a 404 if you click it).

My guess is with the index.html, I use .wrapper and for the two other pages, I use .wrapper2, and something in my code is making it do this.

I hope I have explained everything properly, if not, lemme know.

Robbee T.

3 Answers

Samuel Webb
Samuel Webb
25,370 Points
Samuel Webb
Samuel Webb
25,370 Points

I tested your website out in Safari, Chrome and Firefox, but could not replicate the issue. For all three, once I go down to 819px, the nav is listed out 1 above the other. I went up and down in size and it continued to show what it seems like you were going for. Also, make sure you take a look at your website in Firefox, because there are a few bugs that need to be sorted out.

Samuel Webb
Samuel Webb
25,370 Points

I must have read incorrectly the first time, but now I've seen the issue and have a fix. At the beginning of your code, you have what follows.

header {
    text-align: center;
    float: left;
  font-color: #CCFFCC;
  background-color: #6B6B47;
  padding: 5px 0 0 0;
  width: 100%;
  top: -25px;
  left: -95px;
}

By removing the float: left; I was able to fix the issue.

header {
  text-align: center;
  font-color: #CCFFCC;
  background-color: #6B6B47;
  padding: 5px 0 0 0;
  width: 100%;
  top: -25px;
  left: -95px;
}
Robbie Thomas
Robbie Thomas
31,093 Points
Robbie Thomas
Robbie Thomas
31,093 Points

I guess that works, it rung a bell about floats when I read that. I'll give it a try in a minute.

After I shut my computer off, I noticed that the two-columns overflowed when I view my site on tablet. I think I'll take the columns off.

I also saw on Firefox on how the top part of the 'news' display. I'll have to work on that as well. These days, you have to have the code right for all displays.

Samuel Webb
Samuel Webb
25,370 Points
Samuel Webb
Samuel Webb
25,370 Points

Another suggestion I'd like to make is to put more comments in your CSS and try to organize it into some sort of sections. When you have things sectioned off with comments on what you're doing, it makes it way easier to go back and troubleshoot issues or to have someone else help you troubleshoot. Check out the CSS on my website to see what I mean. I'm not sure if I'm doing it the best way, but it definitely helps me out when I have to fix a mistake or if I want to make changes.