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

[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?

[Ying]

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 🙂

[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?

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Gary]

Love that solution David. Thank you!!

[Gary]

Thank you again!

[David]

Glad we could be of help.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts