[Resolved] Vertical alignment of button with image in post summary

Home Forums Support [Resolved] Vertical alignment of button with image in post summary

Home Forums Support Vertical alignment of button with image in post summary

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1625492
    Gary

    I’d like the read more button (renamed as Read on..) for each post summary on the home page to be vertically aligned with the bottom of each image. Images might vary in height between posts. I’ve searched but can’t find the solution. Can you help?

    #1625716
    Ying
    Staff
    Customer Support

    Hi Gary,

    Give this CSS a try:

    @media (min-width: 769px) {
        .blog .post .inside-article, .archive .post .inside-article {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
    
        .blog .post .entry-header, .archive .post .entry-header {
            width: 100%;
        }
    
        .blog .inside-article .post-image, .archive .inside-article .post-image {
            line-height: 0;
        }
    
        .blog .entry-summary, .archive .entry-summary {
            width: 54%;
            position: relative;
    }
    
        .blog .entry-summary .read-more-button-container, .archive .entry-summary .read-more-button-container {
            position: absolute;
            bottom: 0px;
        }
    }

    Let me know 🙂

    #1626139
    Gary

    Hi Ying

    That is brilliant! Thank you so much! It works great for desktop, unfortunately not quite so good for tablet (when viewed in the customiser, which I now is not always the best representation). Do I need to add something similar to account for the intermediate screen width between mobile and desktop?

    home page of stthomasstourbridge.org in tablet portrait orientation

    Just a quick further question on the code: what does the width: 54%; statement mean in terms of the layout? What is it 54% of?

    Thank you!
    Gary

    #1626204
    David
    Staff
    Customer Support

    Hi there,

    first off lets fix the button overlapping the Summary on smaller screens.
    Replace this block of CSS:

    .blog .entry-summary .read-more-button-container, .archive .entry-summary .read-more-button-container {
        position: absolute;
        bottom: 0px;
    }

    With:

    .entry-summary {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .blog .inside-article .post-image {
        max-width: calc(46% - 2em);
    }

    The 54% width is the width of the post container. I included the max-width of the post image above so it occupies the remaining space.

    After that is just down to how you want it displayed on smaller screens.

    #1626636
    Gary

    Love that solution David. Thank you!!

    #1626638
    Gary

    Thank you again!

    #1626650
    David
    Staff
    Customer Support

    Glad we could be of help.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.