beta2alpha.com
Forum Replies Created
-
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.
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.
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.
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? 🙂
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.
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…
Tried this on my website. It is not effective, nor it solved the issue for Funesh, as his site isn’t working fine either.
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?