Support » Plugin: Jetpack by WordPress.com » JetPack Related Posts not mobile friendly

  • Resolved The MAN

    (@mrelic)


    Dear all,
    First I have to say that I LOVE how JetPack shows 3 thumbnails with related posts on the desktop.

    But on mobiles, it’s a kind of different story. The third thumbnail goes in the next row and makes the whole thing kind of bad. I would love to stay on this plugin, but only if there is a hack to differentiate mobile view with let’s say 2 thumbs, where on the desktop it stays 3.

    You can see how that all looks on this page for instance (desktop great, mobile not so)
    https://theman.today/introducing-sophia-miacova/

    Does anyone have the solution for this?

    Many thanks!

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • 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 1 month, 2 weeks 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.

    The MAN

    (@mrelic)

    @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!

    mbrailer

    (@mbrailer)

    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 1 month ago by  mbrailer. Reason: Updated
    The MAN

    (@mrelic)

    @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 3 weeks, 5 days 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.

    The MAN

    (@mrelic)

    @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!

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.