WordPress.org

Support

Support » Plugins and Hacks » WordPress Related Posts » [Resolved] Custom Thumb Size and Centerness

[Resolved] Custom Thumb Size and Centerness

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author PetraP

    @petrap

    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

    Plugin Author PetraP

    @petrap

    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 🙂

    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. 🙂

    Plugin Author PetraP

    @petrap

    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

    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.

    Plugin Author PetraP

    @petrap

    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

    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?

    Plugin Author PetraP

    @petrap

    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

    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. 🙂

    Plugin Author PetraP

    @petrap

    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

    Hey,

    Sure. Just sent you an Email.

    Thank you.

    Plugin Author PetraP

    @petrap

    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

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘[Resolved] Custom Thumb Size and Centerness’ is closed to new replies.
Skip to toolbar