[Resolved] Tweak Example 3 – Entry Meta Style

Home Forums Support Tweak Example 3 – Entry Meta Style

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1296463
    Earl

    Hello,

    I created a blog using Example 3 here – https://docs.generatepress.com/article/entry-meta-style/

    It mostly came out as expected – but when I look at it on mobile – the “Last Updated” and “Written by” don’t line up exactly – making it look awkward/sloppy on mobile view. I believe it is also not aligned right on desktop – but it’s less noticeable.

    I tried editing some CSS that created it – but I couldn’t seem to find the right place to target – here is the CSS I am using currently:

    .entry-meta:not(footer),
    .entry-meta .posted-on,
    .entry-meta .author-wrap {
    display: flex;
    }

    .entry-meta {
    align-items: center;
    justify-content: center;
    }

    .entry-meta .posted-on,
    .entry-meta .author-wrap {
    flex-direction: column;
    font-size: 18px;
    font-weight: bold;
    padding: 0 27px;
    flex: 1;
    }

    .entry-meta .posted-on {
    text-align: right;
    }

    .entry-meta .label {
    font-size: 14px;
    color: #aaa;
    margin-bottom: .1em;
    }

    .author img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    vertical-align: middle;
    }

    .single h1.entry-title {
    text-align: center;
    margin-top: -15px;
    margin-bottom: 15px
    }
    body.single .site.grid-container {
    max-width: 850px;
    }

    How do I correct this?

    #1296981
    David
    Staff
    Customer Support

    Hi there,

    try fixing the line-height for all the various meta elements with this CSS:

    .entry-meta > div > a,
    .entry-meta > div > *{
        line-height: 1.4;
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.