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

CSS How to Make a Website Debugging HTML and CSS Problems How to Fix Problems with Code

Posted by Ron L
Ron L
6,463 Points

A bug in Nick's gallery site

I thought it was just my code but now I see Nick has the same thing in his code. When you shrink the browser from viewport size 660 to 810 pixels wide, the nav links clump together. http://treehousewebsite.com/index.html

Any idea on how to fix this?

jne
jne
12,613 Points

Doesn't seem like there's anything wrong on the link you sent...

8 Answers

Katsumi Suno
Katsumi Suno
4,194 Points

I found the same issue and even though it is a strange pixelsize no device would ever have, it really bugged me and you can even see the same thing in Nicks videos if you look close enough. He just resizes the browser very fast but you can see it.

I'm pretty new to Web Design and probably can't give you a technical explanation but in this particular case I just found that the navigation doesn't have enough space at a certain width and therefore push the last list element down.

I fixed it in the responsive.css in the following part:

@media screen and (min-width: 660px)
{
    /**************************************
    HEADER
    ***************************************/

    nav
    {
        background: none;
        float: right;
        font-size: 1.125em;
        margin-right: 5%;
        text-align: right;
        width: 50%;

    }

    #logo
    {
        float: left;
        margin-left: 5%;
        text-align: left;
        width: 40%;
    }
}

You have to look at the width declarations in both the nav and logo. Nick originally balanced the width of the nav and #logo with 45% each and I on the other hand gave the nav slightly more space with 50% and only 40% for the #logo. In my case this ensures that the navigation has enough space to show all list items in one row at all pixelsizes.

Kinda late response but there may be others who can't sleep because of this ridiculously unimportant bug ;)

Ron L
Ron L
6,463 Points

"Pretty new to web design?" This is quite impressive for someone who says they are new to web design. And you are correct; it's these little bugs that cause one to lose sleep. Especially when others don't see get the same results.

Thanks Katsumi. I'm going to implement your fix and study it. ...I'm still impressed that you were able to problem solve this.

Katsumi Suno
Katsumi Suno
4,194 Points

Thanks for your kind words! I think my persistance got me there. I was clicking around for quite some time with the chrome dev tools Nick introduced at the end of the course.

And actually there was this bug Nick fixed at some point, the one where the gallery elements needed that nth-child code to clear the floating on every third or fourth element to prevent them jumping on a new row. He explained that the captions below every image needed more space at a certain screen size (because of the wrapping) and therefore pushed the next gallery item down. This actually put me on the right track to look, if the nav bug happened because of something similar.

Ron L
Ron L
6,463 Points
Ron L
Ron L
6,463 Points

Hey Joakim

Did you reduce the size of the browser? See screenshot below. http://screencast.com/t/wE23JyC3nBDn

jne
jne
12,613 Points

I shrinked my viewport to 758 px as your pictures shows, but nothing unusual happens. Here's a pic of mine: http://imgur.com/747OxGS I'm using Google Chrome, what browser are you using?

Ron L
Ron L
6,463 Points
Ron L
Ron L
6,463 Points

...well that's weird. I'm also using Chrome, and resolution is at 100%, sometimes if it's > 100% things will clump. Oh well, thanks for responding.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Hi, did you finished it all? maybe he will sort it in next videos.

If you want to be sure if everything works. Just download the last file and open it to see if it will work.

You might mess something in the code , even something little . Or just i don't know, there must be a reason .

I hope this helps

-Aurelian

Ron L
Ron L
6,463 Points
Ron L
Ron L
6,463 Points

Hi Aurelian,

Yes I finished and that link is to his finished site as well.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Oh wow , didn't look at the url ;d

Well , maybe you have some CSS or something in your browser messed up? maybe try restarting your browser or something. What more likely , what version of chrome have you got? try to download the latest one if you don't have it already.

If your using and old browser , it won't work.

Try different browsers.

Downolad the latest chrome and tell us the resoult.

-Aurelian

Ron L
Ron L
6,463 Points
Ron L
Ron L
6,463 Points

Thanks Aurelian,

It is not my browser since the issue is a) on Nick's site (as well as my own code) and b) appears this way in FF and Chrome, see link. http://screencast.com/t/j2yR5WuWg My version of Chrome is up to date, it's been restarted previously,

And, are you saying that you do not see the same problem I am seeing when changing the size of your browser?

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Nope, everything works just fine on my desktop and mobile. Unless I'll check it again when I'm on pc but I looked at it yesterday a bit and was just fine.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Oh yeah i see, but what phone has a screen of that size? none and what desktop or tablet ? none

This bug is useless because it does not affect anything really .

My opinion

-Aurelian

Ron L
Ron L
6,463 Points
Ron L
Ron L
6,463 Points

They asked the same question 2 years ago. Screens and viewports change. I'm less concerned about the practical application and more concerned about what specific element is causing it to malfunction. If it can happen at that screen size, it can happen at any screen size and it would only help me in understanding how to troubleshoot issues like this when they come up, since it's highly unlikely that something like this will only show up on a screen size that is not in vogue.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Well, i have in my head sort of whats happening , but its a lot of work to explain it : p tag Nick Pettit or somebody , he might explain it in cople of words.