Default thumbnails on mobile

Hi,

first, we are very sorry we did not respond to you via email. We experienced some technical difficulties and I’m afraid your email got lost in the pile. Again, we’re sorry for this.

Now, to your thumbnail problem on mobile devices. I was able to reproduce this issue on Android phone.
The thing is: desktop theme uses thumbnails of 200x150px, while mobile uses 150x150px. I suspect there are no thumbnails of 150x150px generated and mobile theme can’t find them, so you get default thumbnails.

We plan to remove these mobile settings in a week or two and leave only responsive desktop themes, but until then I suggest you try the following:
1) Generate 150×150 thumbnails for featured images you use in your posts. You can use Regenerate thumbnails plugin, but make sure you have thumbnail size in Settings->Media set to 150x150px.
2) OR change custom css of your mobile themes to match the css of your desktop theme.

Let me know if you need any further assistance, I’ll gladly help.

Take care & have a nice day,
Mateja

Hi Mateja,

thanks for your reply!
Interesting hint!
But I did not manually change the thumbnail size for mobile to 150×150, and the mobile placeholder seem to be 200×150. I also do not want to resize thumbnails to square on the whole site, and ideally would have the same (200×150) for mobile. As there is no such switch in my code (changing thumbnail format on mobile), could you give me a hint where to “change it in the css” as you suggested?

Thanks a lot for your support!
Philipp

Hey psteinweber,

I hope you don’t mind me answering on Mateja’s behalf.

To change the size of your (mobile) thumbnails, go to your plugin settings->Mobile Phones->Customize->Custom CSS and add the following lines (in bold) to you code:

.related_post_title {
}
ul.related_post {
}
ul.related_post li {
}
ul.related_post li a {
}
ul.related_post li img {
height:150px;
width:200px;
}

Don’t forget to save the changes and please let me know how it goes!

Take care & have a nice day,

Petra

Hi Petra,

thanks for the reply. I tried what you suggested, however it does not have any effect on the behavior. It is still displaying the placeholder image on mobile, while it selects the correct thumbnail on desktops.

Again: also the placeholder thumbnail was already 200×150 px, probably because I’m utilizing the “Custom Size Thumbnails” option in the plugin settings. But somehow mobile doesn’t seem to find the thumbnails… still…

Any other ideas? Thanks a lot!

Philipp

Hey,

would you mind taking a screenshot of your settings? Also – please try adding !important to height and width:

ul.related_post li img {
width:200px !important;
height:150px !important;

}

Don’t worry, we’ll get to the bottom of this one way or another ??

Best,
Petra

Hi Petra,

I added the “!important” but it doesn’t change anything.
Here are my plugin settings: https://i.imgur.com/efzB6FV.png

Cheers,
Philipp

Hey Philipp,

please add space between width:200px and !important (also height:150px and !important):

width:200px !important;
height:150px !important;

Save, clear browsing date (cache) and restart your browser. Does it work now?

Best,
Petra

Nope, doesn’t work (I cleared the cache, I promise :).

I also doubt that this is the right approach, as, from my understanding, it would simply display the images in different widths and heights. The placeholder image is already displayed in 200×150. But it is the placeholder image and should be the non-placeholder thumbnail. So I would suspect the problem being somewhere in the PHP, where he’s pulling a different image for mobile rather than for desktop.

Also: it only happens on mobile devices, it does not happen when simply changing the browsers width to “kinda mobile” (making it very small). All other responsive features (CSS) do work this way, so that’s why I’m again guessing in the direction of PHP…

Cheers,
Philipp

[ No bumping please. ]

Hey Philipp,

I am sorry for not replying any sooner and don’t worry, I have you on my mind all the time ?? – I was just trying things out and to be completely honest, I am running out of ideas but as Mateja said – we plan to remove these mobile settings by the end of the week and leave only responsive desktop themes. This issue should be resolved then, so for the time being I ask you kindly to bear with us and have patience. Really appreciate it!

In the meantime if there is anything else I can help you with, please let me know!

Best,
Petra

Alright Petra, I will report back once the plugin will be updated. Sounds promising!

Hey Philipp,

just being curious – have you updated our plugin? Is the thumbnail issue fixed?

Take care and have a nice day,

Petra

Yep, fixed!
Great, thanks a lot for the thriving support. This plugin will definitely be my choice for future projects ??

This has definitely made my day! ??