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 Naomi Carpenter
Naomi Carpenter
689 Points

Image spacing

The website I made using the track has a bug between the 7th and 8th image in the Portfolio/Gallery. This is similar to the image bug that was fixed in the video i. e.

gallery li:nth-child(4n) {

clear: left;

}

Images 1-7 work as they should, but image 8 skips the two empty spots available for images and starts a new row. Some of these images are of different measurements, excluding images 1, 2, 3, 7, 8, 9, and 10. It doesn't seem to make a difference what size they are, as I have substituted various images and changed their order many times with this problem remaining.

These are the areas of code that I think may affect this most: under responsive.css - /******************************************************************************* PAGE: GALLERY *******************************************************************************/

#gallery li { width: 28.3333%; }

#gallery li:nth-child(4n) { clear: left; }

under main.css - /******************************************************************************* GENERAL *******************************************************************************/

body { font-family: 'raleway', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img { max-width: 100%; }

/******************************************************************************* PAGE: GALLERY *******************************************************************************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; }

gallery li {

background-color: #ddd; }

/color: #bdc3c7/

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #000; }

under index.html - <li id:"beforethis"> <a href="img/HPHighlighter.jpg"> <img src="img/HPHighlighter.jpg" alt=""> <p>This is a sketch of Daniel Radcliffe as Harry Potter drawn in highlighter for my 2015-2016 Studio Art I project 3 by 10 (portraits).</p> </a> </li> <li id="this"> <a href="img/BaileyFanart.png"> <img src="img/BaileyFanart.png" alt=""> <p>2016 digital art of a fictional dog for one of my friends.</p> </a> </li> <li id="AfterThis"> <a href="img/Stonesketch.jpg"> <img src="img/Stonesketch.jpg" alt=""> <p>2016 digital drawing of a stone angel. I had a lot of fun messing with inverted shading and different techniques to make the subject seem more stone-like.</p> </a> </li> <li> <a href="img/Aboriginal.jpg"> <img src="img/Aboriginal.jpg" alt=""> <p>"The Fall" 2015 aboriginal drawing for World Geography class using graphite and colored pencils. Traditional Aboriginal art uses elements like geometric shapes, cross-hatching, x-rays, rainbow serpents, and the color black to convey a story through a single image.</p> </a> </li>

I have already done some problem-solving (as you can tell by the ids and such), and I have discovered that if I set the 8th image to position: fixed; this solves the issue. Images 9, 10, etc. fall back into the proper grid. However, it creates a new issue because the 8th image (to clarify: any image that is 8th in the gallery) is positioned at the top left of the screen.

This does not occur on smaller screens.

I have screenshots, but the question will not let me add them.

Naomi Carpenter
Naomi Carpenter
689 Points

I'm sorry if the code is hard to read. It didn't appear like this before I posted the comment, and I don't know how else to add the code into the comment (besides copying and pasting the code).

Alexandre Babeanu
Alexandre Babeanu
10,947 Points

You need to format your code better. post your whole index.html In css classes must be adressed to with a .

such as .wrapper

id with a # such as #gallery

Two objects on the same page cannot share an id.

Naomi Carpenter
Naomi Carpenter
689 Points

The ids aren't anywhere else in the code, though. I put them there when I was trying to fix this formatting issue, but I gave up. I can remove them if you think they are the problem, as they are unnecessary. None of the ids are shared. This is fixed by setting the 8th image to position: fixed; but then I have an image following the top left corner.

Alexandre Babeanu
Alexandre Babeanu
10,947 Points

Okay but you need to edit your question and format the code correctly, check out the Markdown cheatsheet by clicking the link just under your question.