Related Post Thumbnails Reflow In Responsive Theme

Hi Joe! I had a look at your site, and was able to see the issue you described. We should be able to make the desired layout adjustments using some media queries for smaller devices. Can you try adding the following to your Custom CSS?

@media only screen and (max-width: 640px) {
  #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4),
  #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) {
    clear: none;
  }
}

Let me know how that works for you!

Thanks … tried it, but did not work.

Added it to my custom CSS, emptied all W3 caches & refreshed a post page on my iPhone and also Safari using the smallest window possible. Either way, this CSS did not work.

I even tried removing the spaces between your classes in your custom CSS. I’ve had issues with that before … but that didn’t fix it either.

The thumbnails appear the old way. Nothing changed.

Keep the CSS coming … I’ll gladly test it out. ??

Thanks for giving that a shot! Could you try without the media query? Something like this:

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4),
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) {
    clear: none;
}

I had to add !important to your CSS so now it looks like:

#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4),
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) {
clear: none !important;
}

When I do I get this icon pattern:
X X
X X
X
X X
X
X

It’s a start.

I’ve also left this CSS live on my site if you want to see it live.

Bummer … just looked at the icons on a computer screen & with the last CSS they look bad!

X X X
X
X X X
X X

I have to pull the CSS if you haven’t seen it live yet. To nasty looking to leave up. lol

Hi Joe! Thanks for the update. Does the issue persist on computer screens if you use the following?

@media only screen and (max-width: 640px) {
    #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4),
    #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4) {
        clear: none !important;
    }
}

Let me know, and we can go from there.

If I use the above CSS:
On my iMac 5K: 2560×1440
On an iPad Air 2048×1536

Those both format as expected.

On my iPhone 6s: 1334×750

The layout gets wonky in portrait on the iPhone.

XX
XX
X
XX
X

If turned to landscape the layout looks normal

XXX
XXX
XXX

Thanks! I think we’re making progress ?? Can you try the following?

@media only screen and (max-width: 640px) {
    #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(2n+3),
    #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(2n+3) {
        clear: none !important;
    }
}

Close but no cigar.

XX
X
XX
XX
XX

And I’m also finding another issue — title size/height. If there’s a post that shows the 9 Related Posts and the post titles are 2-3 lines, it makes the icons lay out differently than if the titles were just 1-2 lines.

Shoot me now! ??

Look at these two posts on a small device or small browser window. They lay out differently because of title height?

https://www.go2jo.com/music/rock-roll-tour-of-the-jersey-shore-volume-4

https://www.go2jo.com/photos/john-scher-from-the-boardwalk-to-the-capitol

They lay out differently because of title height?

That’s correct, and that’s to be expected. The only way to change that behaviour would be to limit the number of characters displayed in the titles, as explained here:
https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

XX
X
XX
XX
XX

You could expand on what you’ve done with Ryan with something like this:

@media only screen and (max-width: 640px) {
    #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(2n+3),
    #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(2n+3), #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(3n+4),
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(3n+4),
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(4n+5),
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(4n+5),
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(5n+6),
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(5n+6),
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(6n+7),
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(6n+7),
#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post:nth-child(7n+8),
#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(7n+8){
        clear: none !important;
    }
}

Let me know how it goes.

I used your new & improved CSS & I added this:

div#jp-relatedposts div.jp-relatedposts-items-visual h4.jp-relatedposts-post-title,
div#jp-relatedposts div.jp-relatedposts-items-visual h4.jp-relatedposts-post-title a,
div#jp-relatedposts div.jp-relatedposts-items p {
	width: 221px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

It really tightens up the overall look. Okay, admittedly it’s only one line of the Title & an ellipsis, but it looks TIGHT & good on all devices! And on a computer, with mouse over, you do get the full title & an excerpt.

I’ll still try to see if I can get it to 2 lines. But for now, this is the solution.

Maybe you guys can build in the ability to choose how many lines, ellipsis or none, centered text, et. al. … via JetPack prefs, Java or documented CSS additions.

For right now … this is a good work around solution! Thanks!