Site logo

Archived topic

Make author meta go beneath date meta on mobile

4 replies · Started by Michelle on April 13, 2022

Viewing posts 1–5 of 5

I would like my author meta to go on a line beneath the date meta on mobile. Right now they are on one line that spills to the next, with "by" often being on the line with the date instead of preceding the author. (I want "by" to be before author.)

date
by author meta

CSS or Block Elements? I tried to follow the post meta block element tutorial, but couldn't get it to replace the one I have now, even when I had the replace toggle enabled.

Hi Michelle,

Try adding this CSS in Appearance > Customize > Additional CSS:

@media (max-width: 768px) {  
.inside-article header.entry-header .entry-meta {
    display: flex;
    flex-direction: column;
}

.inside-article header.entry-header .entry-meta .posted-on > *  {
    border: none;
    padding: 0;
}
}

Side note: You may also design how posts appear in your blog/archive pages through a Content Template - Block Element. Here is an article regarding it: https://docs.generatepress.com/article/block-element-content-template/

Hope this helps! Kindly let us know how it goes. :)

Thank you for your help on this. I tried for several hours, intending to figure it out myself instead of submitting a ticket. I did learn a few things in the process.
Are there tutorials you can recommend, not so much with achieving specifics, but with overall comprehension of Generatepress? If not, I am sure there are many people like me who would take paid classes on it.

I will look into it.

This archived topic is closed to new replies.