Vertical alignment of button with image in post summary

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 :)

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

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.

Love that solution David. Thank you!!

Thank you again!

Glad we could be of help.