[Resolved] Blog page button and item alignment

Home Forums Support Blog page button and item alignment

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1229471
    View on IT

    Hello support,

    On our GeneratePress website we have a blog page published. The blog items are showing, but we don’t really like the lay-out. We want to show the image, title, excerpt and read-more-button neatly alligned to each other, but this doesn’t seem to be possible with the default theme settings.

    Would it be possible to vertically align these items to each other using the theme options, or some other styling?

    Please let me know, thanks!

    With kind regards,
    View on IT

    #1229601
    David
    Staff
    Customer Support

    Hi there,

    try adding this CSS:

    .generate-columns .inside-article,
    .generate-columns .entry-summary {
        display: flex;
        flex-direction: column;
    }
    
    .generate-columns .entry-header {
        margin-bottom: 1em;
    }
    
    .generate-columns .entry-summary {
        margin-top: auto !important;
    }
    
    .generate-columns .entry-summary > p:first-child {
        margin-bottom: auto;
    }
    
    .generate-columns .read-more-container {
        margin-top: 1em;
    }
    #1230989
    View on IT

    Hi David,

    Thanks for your quick reply! This CSS is adding some great styling already, but it’s still not 100% perfect.
    The summary is now aligned to the bottom of the column. I’d like to vertically align this to the top, and horizontally align the buttons with each other.

    Would that be possible too?

    With kind regards,
    View on IT

    #1231149
    David
    Staff
    Customer Support

    Change this CSS:

    .generate-columns .entry-summary {
        margin-top: auto !important;
    }

    for:

    .generate-columns .entry-summary {
        flex: 1;
    }
    #1233547
    View on IT

    Works great, thanks!

    #1233577
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.