[Resolved] Last Updated

[johnzoro]

I’ve got a plugin that shows when the post was last updated but i want to put it next to date published

so it would be

date published | shortcode here for post updated

any ideas?

[David]

Hi there,

you shouldn’t require a plugin to display the updated date.
Is it possible to see a post on your site, so i can provide the best solution ?

[johnzoro]

sure

[Ying]

Hi John,

Try this CSS:

.single-post .posted-on .updated,.single-post .entry-header .entry-meta span.posted-on {
    display: inline-flex;
}

time.entry-date.published {
    order: -1;
}

.single-post .posted-on .updated:before {
    content: "|";
    padding-left: 10px;
    padding-right: 10px;
}

[johnzoro]

Hi Ying,

That sorta worked!

I added the word “Updated:” after the |

Is there a way to make the updated bit bold?

Also the spaces look a bit funny

[img]https://i.ibb.co/hd62xWL/spaces.png[/img]

the green bit indicates the space that’s ok but the red bits show the space looks too big?

[Ying]

Try replacing the pseudo element CSS with this, so there’s no padding on the right, and set the font-weight to bold.

.single-post .posted-on .updated:before {
    content: "| Updated: ";
    padding-left: 10px;
    font-weight: bold;
}

[johnzoro]

yeah that’s great!

i had a play around and i think i’ve got the look i wanted!

thanks

[johnzoro]

it looks ok, but when i look at it on mobile the layout goes all funny

is there a way to maybe make the text smaller on mobile so it’s all on one line?

[Ying]

Any chance you can link me to a post again? 🙂

[johnzoro]

okey dokey

[Ying]

Try this CSS:

@media (max-width: 768px) {
    .single-post .entry-header .entry-meta {
        font-size: 14px;
        display: flex;
        flex-direction: column;
    }
}

[johnzoro]

yeah that works! thanks

[Ying]

You are welcome 🙂

[Author]

Posts