JetPack Related Posts not mobile friendly

This worked for me. Add this to your stylesheet:

@media only screen and (max-width: 479px) {
   .jp-relatedposts-post:last-child {
      display: none;
   }
}

This will cause the last item in the Related Posts grouping to not appear on screen widths at or below the max-width value. (you could change that value if it’s not right for your needs.)

• This reply was modified 5 years, 7 months ago by mbrailer. Reason: "at or below" not "below"

you are a god himself! :))

Thank you! works perfectly! <3

This resolves and can close the topic.

@mbrailer Hello friend,

do you have any idea how to make those two related posts responsive on mobile?

You can see in this article that they do not stretch from left to right on mobile (desktop is working perfectly).
https://theman.today/bay-of-kotor-europes-most-beautiful-fjord/

Thanks!

Hello again, I’m glad you asked because it gave me an opportunity to improve the layout on my own site. Below is my code from the earlier example, with updates:

@media only screen and (min-width:321px) and (max-width:640px){
	.jp-relatedposts-post:last-child {
            display: none;
	}
}
@media only screen and (max-width:640px){
	.jp-relatedposts-items-visual {
            margin-right: -20px !important;
	}
}

Here’s what I changed from before:

• On screens 320 pixels and below, the thumbnails go to 100% of page width, so there’s no reason to eliminate the third one.
• On screens 640 pixels and below, a right margin, formerly 20px, is changed to -20px.

• This reply was modified 5 years, 7 months ago by mbrailer. Reason: Updated

@mbrailer You are god, I already told you that :))

Thank you!

@mbrailer HI it’s me again :))

Don’t kill me! hehe

One more q… I noticed that when I hover over related articles on a desktop view, it shows short previews of an article (First 100 characters or something). Is it possible to say – don’t do that – it just slows site?? I believe pictures are enough.

You can see here:
https://theman.today/caught-our-eye-aston-martin-dbc-concept/

And one more :))
Pictures are dimmed a bit. Is it possible to say, just post the photo don’t make any effects or dim them less?

Thank you!!!
Marko

• This reply was modified 5 years, 7 months ago by The MAN.

To eliminate the dimming pictures, add this as a separate line in your CSS:

.jp-relatedposts-post{opacity:1 !important}

I think that will work, but I haven’t tested it.

Regarding the pop-up text, that’s a Javascript function provided by Jetpack. Although it might be possible to make the pop-up not appear using CSS, the text itself will still be transmitted with the page, so it wouldn’t reduce the amount of data sent or speed up page loading.

If you’re still curious about this, I suggest you open a separate discussion thread and maybe someone from the Jetpack team can explain it better.

@mbrailer

Great, that works! :))
And it looks much better when pictures are not dimmed, in my opinion.

Regarding the pop-up text, if you have an idea of how to disable it by CSS, I would be very thankful if you share it with me.

Thanks once again!