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

Posted by Robert Fegel
Robert Fegel
594 Points

Issue with Image spacing on Portfolio page.

Hi all!

So I just finished the Build A Website course and just started customizing it. However I ran into an issue with image spacing on my portfolio page. I started adding more images and if you look at my page, you'll notice a huge white gap beside the 7th image.

I'm not quiet sure how to fix it. I thought maybe it has to do with the media query...

Website here: http://www.throughskyslens.com

Any help greatly appreciated! Thank you!

Richard Skinner
Richard Skinner
5,839 Points

It looks like you might have to clear some of the pictures divs in order to get it to look correct. It seems like you have the divs floating left and that's whats causing it to not look so great. From what I can tell, that is the issue when I inspect the source.

Also, test it at a smaller width, and add the media queries to fix similar issues.

2 Answers

Rochell Hill
Rochell Hill
10,677 Points
Rochell Hill
Rochell Hill
10,677 Points

I can't see any issue with the code. Maybe clear the float? Your code is pretty clean, very easy to read. I noticed there was an issue with something similar with the 2nd picture, middle of first row pics, when I resized the screen to a small (500px?) in chrome. It may be the size of that 2nd 'li' is overflowing and pushing everything else. There is one typo on your css.main page line 149 (I think) the css is for your contact page and the comment says 'portfolio page'. Probably overlooked when you cut and pasted the previous comment line.

Hopefully someone with more experience will chime in here. Nice pictures btw.

Robert Fegel
Robert Fegel
594 Points

Thank you so much! I tried to add a clear for image 8, but it still looks the same unfortunately..

Thank you for pointing out the issue on a small screen, it seems the images with a different height and width from the rest was causing the issue. After removing those and replacing with similar sized photos, it fixed that issue but the 8th image still insists on being below the 7th for some reason.

Nice catch on my comment for portfolio page! That's exactly what happened, I copied and pasted it and forgot to change the text, lol.

Thank you again, I'll keep trying to mess around with the code! I wonder if it's the width of the images causing it...

Robert Fegel
Robert Fegel
594 Points

Well I kind of got it working better now... I made all the image the same size and then when I added 8 to:

gallery li:nth-child(4+8n)

It fixed that floating issue. But it's still having issues when scaled down to phone size and also seems to be in other sizes too, which you can see if you slowly resize the browser window width wise... I think it has to do with the different lengths of text under each photo?

Richard Skinner
Richard Skinner
5,839 Points
Richard Skinner
Richard Skinner
5,839 Points

That's good you managed to get it fixed somewhat. I think you'll have to use media queries to change the style for smaller devices. Come up with a different layout that's better to use on smaller devices.