[Resolved] How to add post meta like this

[Amol Chavan]

I want to add blog post meta like this as shown here in the screenshot:- https://ibb.co/ry310DS

My current one you can here: https://www.growthfunda.com/side-hustle/

Could you please help on this.

[Leo]

Hi there,

Is that just for single posts?

[Amol Chavan]

Yes it’s for single posts not for Archives.

[Tom]

Hi there,

I would remove the current styling you have (margin, border etc..), then do this:

.single .entry-meta {
    display: flex;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 5px 0;
    justify-content: center;
}

.single .entry-meta .posted-on {
    order: 1;
}

.single .entry-meta .byline {
    order: 2;
}

.single .entry-meta .comments-link {
    order: 3;
}

.single .entry-meta > * {
    padding: 0 10px;
}

[Amol Chavan]

I have added code as you mentioned but it’s looking something different. The author’s image is so big and the Meta sections are too big. I don’t want the author’s image too. I need exactly as shown in the previous attached image. Here is the link post-implementation of this code: https://ibb.co/27FNyW7

[Tom]

You’ll need to remove the custom code you’ve added to add the image in the first place.

If you remove that code, the result should be very close to what you’re wanting.

[Amol Chavan]

Thanks got the same result. I just need all the text inside meta to be bold and there should be some more margin between Title & Meta. That’s it. Another problem I observe is that the meta look and feel breaks on the Blog Archive page. It looks like this: Amol ChavanOctober 24, 2020. The Author name & Date are touching each other. I need some space between them too.

[David]

Update this CSS:

.single .entry-meta {
    display: flex;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 5px 0;
    justify-content: center;
}

to:

.single .entry-meta {
    display: flex;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 5px 0;
    justify-content: center;
    margin-top: 1.5em; /* add space between title and meta */
    font-weight: 700; /* Increase font weight */
}

[Amol Chavan]

Thanks, it looks good and perfect on a single blog post. On the Blog archive, I observe that the meta on Blog Archives look looks like this: Amol ChavanOctober 24, 2020. The Author’s name & Date are touching each other. I need some space between them too.

[Amol Chavan]

Thanks, it looks good and perfect on a single blog post. On the Blog archive, I observe that the meta on Blog Archives look looks like this: Amol ChavanOctober 24, 2020. The Author’s name & Date are touching each other. I need some space between Author name and Date: Amol ChavanOctober 24, 2020

[David]

Try this CSS:

body:not(.single) .entry-meta > * {
    margin-right:  10px;
}

Increase the 10px to make a large space.

[Amol Chavan]

Thanks, this ticket is resolved

[David]

Glad to hear that

[Author]

Posts