Hey,
thanks for reaching out – I’ll gladly help!
I think if you add this into you custom CSS code, it should work:
.related_post_title {
}
ul.related_post {
}
ul.related_post li {
width:150px !important;
}
ul.related_post li a {
}
ul.related_post li img {
height:150px !important;
width:150px !important;
}
Check the screenshot for easier navigation.
Let me know how it goes,
Petra
Hey,
I have checked out your blog and noticed you are using thumbnails in 205×130(px) size, so the code is a bit different – width: 205px !important and height:130px !important:
.related_post_title {
}
ul.related_post {
}
ul.related_post li {
width:205px !important;
}
ul.related_post li a {
}
ul.related_post li img {
height:130px !important;
width:205px !important;
}
Sorry for not noticing this earlier and I hope this helps 🙂
Thread Starter
BitSin
(@bitsin)
Hey Petra,
Thanks for the reply. Seems the ul.related_post li { width:205px !important; } part did the job. (I already had the “li img” sizes in custom CSS but no change.
Now, I two another problems came up.
1) It started showing random “Unknown” thumbs. [SCR]
2) In desktop, it fits 3 in each row just perfect, but in smaller devices, it has big white spaces. [SCR]
Also, is it possible to have two different number of related posts on Desktop and Mobile devices? For example, 6 (three in each row) for PC, and 4 (one in each row with full-width) on Mobile?
I really appreciate your time and help. 🙂
Hey,
thanks for getting back to me!
1.) can you give me a direct link to this post, I have clicked around but couldn’t find those generic thumbnails anywhere?
2.) sure, we can adjust this – for example, you can add this to your previous custom CSS code (just put it at the bottom):
@media screen and (max-width: 480px){
.wp_rp_content {
padding-left: 15px !important;
}
ul.related_post li {
margin-left:40px !important;
}
}
Save, refresh and you are good to go (hopefully) 🙂
And about having different number of related posts (desktop, mobile device) – unfortunately this is not possible (sorry).
Please let me know how it turned up, take care and have a lovely day,
Petra
Thread Starter
BitSin
(@bitsin)
Hey Petra,
Thanks for the reply, once again.
1) The random invalid thumb problem solved by itself somehow!
2) The margin is too long [SCR], I tried modifying it, but all I got at the end was the everything in center. Is it possible to make it like using 90% of available width in Mobile device? (To cover the white space)
Thank you so much for your time and effort.
Hey,
try replacing the previous code with this one:
@media screen and (max-width: 480px){
.wp_rp_content {
width:100% !important;
padding-left:15px !important;
}
ul.related_post li {
width:95% !important;
height:95% !important;
}
ul.related_post li a {
width: 95% !important;
height: 100% !important;
}
ul.related_post li img {
height:auto !important;
width:90% !important;
}
}
Everything put together should look something like this:
.related_post_title {
}
ul.related_post {
}
ul.related_post li {
width:230px !important;
}
ul.related_post li a {
}
ul.related_post li img {
height:130px !important;
width:230px !important;
}
@media screen and (max-width: 480px){
.wp_rp_content {
width:100% !important;
padding-left:15px !important;
}
ul.related_post li {
width:95% !important;
height:95% !important;
}
ul.related_post li a {
width: 95% !important;
height: 100% !important;
}
ul.related_post li img {
height:auto !important;
width:90% !important;
}
}
Keeping my fingers crossed 🙂
All the best,
Petra
Thread Starter
BitSin
(@bitsin)
Hey Petra,
Still the same. [SCR]. All I need is to fulfill the white space around with thumb and title in Mobile Devices.
Maybe we need to use bigger thumbs? But in that case how can we fit 3 in each row on bigger devices?
Hey,
sorry for not replying sooner! Just to be sure that the code is actually working – would you be so kind and change width:90% !important to 100%:
@media screen and (max-width: 480px){
...code..
ul.related_post li img {
height:auto !important;
width:100% !important;
}
}
Are thumbnails any bigger when seen on mobile device? They should be 🙂
If they will not change at all, please make a screenshot of your plugin settings, especially of the CSS code, so that I can have a closer look.
Take care and have a nice day,
Petra
Thread Starter
BitSin
(@bitsin)
Hey Petra,
Sorry for very very late reply. I was on a business trip.
I changed the code from 90% to 100%, but nothing has been changed. [Screenshot]
Here are plugins settings: [Page 1] – [Page 2] – [Page 3]
I really appreciate your help. 🙂
Hey,
welcome back 🙂
Would it be possible to make me a guest account on your blog, so that I take a closer look at this? You can send those credentials to support[at]zemanta[dot]com.
Let me know what you think, take care and have a lovely day,
Petra
Thread Starter
BitSin
(@bitsin)
Hey,
Sure. Just sent you an Email.
Thank you.
Hey,
hope you don’t mind but I am going to mark this topic as resolved as we fixed things via email.
All the best,
Petra
