Mobile Device

Hey Andy,

thanks for reaching out – I think we can make it happen! Would you be so kind and give me a link to your blog and also tell me how would you like “related posts” to be seen on mobile?

Looking forward to your reply,
Petra

Hey Petra,

it should be shown in the same way like in the desktop version:

https://bohemiandiesel.com/muses/monday-muses/delilah-parillo

is that possible?

Hey,

thanks for getting back to me! Hmmm…I am not sure we can make them show up all in one row, if that’s what you are thinking? I mean, we would have to make the thumbnails really small. But before we do anything to those thumbnails – are those “Like” and “Pin it” buttons there on purpose? Also, there seems to be some kind of button under the related posts?

Best,
Petra

Hi,

“Also, there seems to be some kind of button under the related posts?”
–>these are the tags. we need them….

“are those “Like” and “Pin it” buttons there on purpose?”–> the owner of the site won`t them remove…

You can fix it how you want but important is that there is no more overlaps.

Best,
Andi

Hi Petra,

is there already any solution?

Best,
Andi

Hey Andi,

I did what I could from our plugin’s point of view. Save all your settings before you make any changes. Try the following code (replace/add the code to that “Custom CSS” box):

.related_post_title {
}
ul.related_post {
    display: inline-block !important;
    margin: 0 !important;
    padding: 18px 10px !important;
    position: absolute !important;
    z-index: -2 !important;
}
ul.related_post li {
}
ul.related_post li a {
}
ul.related_post li img {
}

@media screen and (max-width: 480px){
ul.related_post li a:nth-child(2) {
font-size: 10px !important;
}
ul.related_post.wp_rp {
z-index:-5 !important;
}
ul.related_post {
z-index:-5 !important;
}
ul.related_post li {
display: inline-block !important;
width: 75px !important;
clear: both !important;
margin-bottom: -10px !important;
}
ul.related_post li a {
position: relative !important;
display: block !important;
font-size: 10px !important;
line-height: 1.1em !important;
text-decoration: none !important;
margin-bottom: 5px !important;
text-indent: 0 !important;
}
ul.related_post li img {
width: 75px !important;
height: 75px !important;
}
}

Here is a screenshot for easier navigation.

Let me know how it goes,
Petra

PS: That z-index is a bit tricky as I can’t test this fully on my side, so if it is causing any difficulties just change it to zero. If you wish you can make me a guest account so that I can take a closer look and make finer adjustments.

Hey Petra,

I can`t fix it. I think it′s better you may have a look. If you want ??

Would be nice. How should we handle it?

Best,

Andi

Hey,

sure no problem, I’ll have a go at it – it would be best if you send those credentials to support[at]zemanta[dot]com and first thing tomorrow morning I’ll have a look and see what I can do ??

Take care,
Petra

Perfect ??

Check your mails….

Best,
Andi

Hey Andi,

no more overlapping issue on desktop and mobile devices – and I hope you will agree that the 3×2 display on a mobile device is better than all in one row… if I would make them fit in one row, the thumbnails would be really tiny and the titles wouldn’t be readable.
Desktop version.
Mobile devices version.

Let me know what you think, take care and have a nice day!

Petra

Hey Petra,

Looks great. THX very much. How can I rate your support?

Best,
Andi

Could it be that via iphone it does not work?!

Hmmm…will check it out and get back to you ASAP.

Hey Andi,

you are right, it doesn’t work on iPhone, so would you be so kind and replace:
@media screen and (max-width: 480px)
with:
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px)
in the plugin settings.
It should work for the newer models but not sure for the old ones.

Let me know how it goes,
Petra

Hey Petra,

nice to hear from you. It does not work. I give you again the admin so maybe you can have a look if you want and if you have time.

Best,
Andi