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 trialRon L
6,463 PointsA 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?
8 Answers
Katsumi Suno
4,194 PointsI 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
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
4,194 PointsThanks 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
6,463 PointsHey Joakim
Did you reduce the size of the browser? See screenshot below. http://screencast.com/t/wE23JyC3nBDn
jne
12,613 PointsI 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
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
7,369 PointsHi, 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
6,463 PointsHi Aurelian,
Yes I finished and that link is to his finished site as well.
Aurelian Spodarec
7,369 PointsOh 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
6,463 PointsThanks 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
7,369 PointsNope, 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
7,369 PointsOh 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
6,463 PointsThey 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
7,369 PointsWell, 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.
jne
12,613 Pointsjne
12,613 PointsDoesn't seem like there's anything wrong on the link you sent...