Jeremy… any help about this?
Whatever I do when resizing/reorganizing the thumbnails; the rows seem to be in rows of 3 elements. When can I change this value?
Could you post your site URL here, so I can have a look?
If you want it to remain private, you can also contact us via this contact form:
http://jetpack.me/contact-support/
Hi mate; my website is http://www.beta2alpha.com – still very much work in progress.
Try loading any post, and resizing the window – the posts will then arrange in the 2+1;2+1 fashion.
I tried solving it with the “nth-post(2n+2)” method, which works fine, until long post title ruin the layout again…
I am now using the following CSS:
div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post:nth-child(2n+2),
div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(2n+2) {
clear: none !important;
}
As you can see it works fine until there is a long post name, which breaks the 2/2/2 distribution on narrow mobile screens.
You can try these pages:
http://www.beta2alpha.com/10-questions-to-understand-what-you-want-in-life/
Fine on mobile screens, wrong on desktop!
And:
http://www.beta2alpha.com/6-ways-to-be-cool-and-popular/
Wrong on mobile screens, fine on desktop!
Quite infuriating, isn’t it? 🙂
Added the following:
div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post {
height: 200px !important;
}
This seems to resolve a bit; although I can’t foresee what’s the right height of the picture when the screen is a narrow one.
I think that making the height differential by screen width using the @media function can solve this. If you don’t have a better solution, kindly mark this as solved.
Looking at your site right now, things seem to look good on desktop and on iPhone. It looks like you’ve figured it out!
Hey beta2alpha.com, it looks good, care to share your solution? This is exactly what I want to achieve.
Namaste, Funesh! Nice gravatar, there…
Try this code in your child theme/main theme custom CSS:
div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post:nth-child(2n+2),
div#jp-relatedposts div.jp-relatedposts-items-visual .jp-relatedposts-post:nth-child(2n+2) {
clear: none !important;
}
/* Jetpack Related Posts Responsive Layout */
@media (min-width: 1201px) {div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post {height: 220px !important;}}
@media (min-width: 981px) and (max-width: 1200px) {div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post {height: 190px !important;}}
@media (min-width: 771px) and (max-width: 980px) {div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post {height: 180px !important;}}
@media (min-width: 641px) and (max-width: 770px) {div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post {height: 190px !important;}}
@media (min-width: 561px) and (max-width: 640px) {div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post {height: 220px !important;}}
@media (min-width: 481px) and (max-width: 560px) {div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post {height: 190px !important;}}
@media (min-width: 441px) and (max-width: 480px) {div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post {height: 185px !important;}}
@media (min-width: 401px) and (max-width: 440px) {div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post {height: 180px !important;}}
@media (min-width: 361px) and (max-width: 400px) {div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post {height: 175px !important;}}
@media (min-width: 321px) and (max-width: 360px) {div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post {height: 170px !important;}}
@media (max-width: 320px) {div#jp-relatedposts div.jp-relatedposts-items .jp-relatedposts-post {height: 200px !important;}}
I know it’s quite control-freaky to have so many checks on the resolution, but I’m striving to make my site enjoyable on as many media as possible.
Let me know if anything else is needed.
Thanks a lot for that code.
Yeah those responsiveness settings are just insane .. 🙂
I might let jetpack dictate responsiveness, but thanks for helping out on the original issue.
