[Support request] Thumbnails equal size

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Thumbnails equal size

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #30552
    Dax
    Participant

    Hi,

    How would I make each of the tiles in a row/column align so that the images are equal and that the read more align? I don’t like how they are currently misaligned i.e, I want them to all line up in a row.

    Is there some css?

    #30556
    elvin
    Moderator

    Hi there,

    Can you provide a link to the page in question? So we can inspect the page and provide custom CSS writeup if necessary.

    You can send in the site details through our contact page if you wish to keep it private – https://wpshowposts.com/contact/

    Let us know.

    #30573
    Dax
    Participant

    Hi sent an email many hours ago?

    The site in question: shorturl.at/ipNW9

    #30597
    elvin
    Moderator

    Hi there,

    Thank you for sending it in.

    I’ve replied to the mail you’ve.

    Here’s the content of it incase the mail didn’t come through:

    For the image:

    The image files themselves are not the same size/dimension so it makes sense why they don’t display the same. But we can force them to display the same size but with cropping using CSS.

    .wp-show-posts-image {
    height: 300px;
    width: 500px;
    overflow: hidden;
    }
    
    .wp-show-posts-image img {
    object-fit: cover;
    }

    Applying this will make all the images the same size, which in turn will align the top side of the titles. But then there’s an issue on varying title length.

    For the text:

    The titles actually have the same font size but the problem with this is the title length varies.

    There are different ways to approach this. One is to trim the title so only a specific number of words would appear. But this may not be desirable as some users want the whole title to always display properly.

    Another approach is to force a fixed container height for the title’s container so the title areas always occupy the same vertical space regardless of how long the title is.

    But the problem with this is, there will be a huge gap for titles that have a significantly shorter number of words. It will look weird for some users.

    That said, you’ll have to pick between the 2 which do you prefer. a “cropped” title or a fixed title height with weird gaps for shorter ones.

    #30609
    Dax
    Participant

    Thank you, that worked great!

    Is it possible to do something similar for the text below the image too, so that they are resized to in order to line up?

    #30632
    elvin
    Moderator

    Is it possible to do something similar for the text below the image too, so that they are resized to in order to line up?

    We normally line that up with auto margins but I don’t think that’s applicable to the layout of your WPSP because you’re using masonry.

    Masonry posts don’t have equal column height so it won’t work.

    You may have to disable masonry and apply this CSS if you wish to try to align things:

    .wp-show-posts-inner {
        display: flex;
        flex-direction: column;
    }
    .wp-show-posts-entry-summary { margin-top: auto; }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.