3 column layout sometimes has issues with spacing between thumbnails

  • Resolved earthtojeremy

    (@earthtojeremy)


    8 years, 7 months ago

    I’ve been having issues with spacing between post thumbnails in a 3 column gallery layout. Sometimes two thumbnails will have no spacing between them, and then all the following thumbnails in that same column will follow suit with the same lack of spacing. Strangely, it won’t affect thumbnails in the same column preceding the first image that does this.

    This also doesn’t happen all the time. As I was adding posts, I noticed sometimes a column would collapse at a point, and other times it won’t. I’m at a loss for what is causing it. I know it’s not the thumbnail images because it has the same spacing problem at the same spots in the grid even when I remove the featured thumbnail from the post entirely. As far as I can tell, all the posts have identical settings.

    Please take a look at this page and notice how the second thumbnail under “Projections” has no spacing:

    https://lastknownfootage.com/video/

    Before I added the post beneath it, “Shorts,” all the thumbnails that followed in the second column in “Sketch & Series” collapsed into the first column too. When I added the “Shorts” post, the “Projections” thumbnail remained collapsed, but it fixed all the thumbs in the second column that followed.

    There are no anomalies in the parsed code, and I can’t find anything in the theme style.css that affects any aspect of thumb or column spacing.

    Please help!

    Thanks,
    Jeremy

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter earthtojeremy

    (@earthtojeremy)

    I think figured out part of the problem, though I have no idea why it’s doing it or what to do about it.

    I have posts displayed by category on the above page in the 3-column, full-width gallery setting. If the number of posts in a given category isn’t a multiple of 3 (that is, all full rows of 3 thumbnails each,) it breaks the thumbnail spacing for one entire column in the following category.

    Currently trying to brainstorm why this would happen. If anyone has any ideas let me know. Thanks.

    Thread Starter earthtojeremy

    (@earthtojeremy)

    Figured it out, for anyone having the same problem.

    Go to this section of style.css:

    @media screen and (min-width: 680px) {
	.portfolio-view #content .hentry {
		float: left;
		width: 32%;
		margin: 0 2% 2% 0;
	}

	.portfolio-view #content .hentry:nth-of-type(3n) {
		margin-right: 0;
	}
}

    Delete the “nth-of-type” margin fix entirely. This fixes the original spacing issues, but then adds an extra 2% width to the content which won’t fit in the container. To fix this you have to shrink something a tiny bit. The final result should look something like this:

    @media screen and (min-width: 680px) {
	.portfolio-view #content .hentry {
		float: left;
		width: 31%;
		margin: 0 2% 2% 0;
	}

}

    Hope this helps someone.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘3 column layout sometimes has issues with spacing between thumbnails’ is closed to new replies.