Post meta mobile display problem

Hi there,

This is the mobile view of the desired look page you've provided:
https://www.screencast.com/t/oOzblGJvbl

Just want to confirm that's actually what you want?

I feel like the current look is much better.

The current pages with GP are indeed better apart from the way author and date display on 2 lines each on mobile.

That is what I want to fix.

Hope that clarifies it. Thanks.

So what is the desired result?

There is simply not enough room for everything to stay within one line on mobile.

The date should just go to its own line, ideally without a separator.

Desired result screenshot: https://gyazo.com/c0a70776c21381ab8ad5df04541db173

Thanks.

Hi there,

couple of tweaks to make and a little CSS.
Edit the Post Meta block. We're going to add a couple of Additional CSS Class(es) in the Advanced settings for a couple of the blocks.

the parent Container Block add entry-meta-block
for the date Headline Block add entry-date-block

With the date headline selected, switch to mobile view, remove the left padding and left border values.

Then we need a little CSS:

@media(max-width: 768px) {
    .entry-meta-block .gb-inside-container {
        flex-wrap: wrap;
    }
    .entry-date-block {
        flex: 1 0 100%;
    }
}

That works, thank you.

One more little fix please on this, when the name is very long it jumps the author line on a new line. You will see what I mean in the example page I added in private information.

try updating the CSS above to this:

@media(max-width: 768px) {
    .entry-meta-block .gb-inside-container {
        flex-wrap: wrap;
    }
    .entry-date-block {
        flex: 1 0 100%;
    }
    .entry-author-block {
        flex-basis: calc(100% - 60px);  
    }
}

Then edit the block element give the Author headline an Additional CSS Class of: entry-author-block

Works perfectly.

Thank you very much.

Glad to be of help