[Support request] Adding Entry Meta on Pages – rendering outside .entry-header DIV

[Morgan]

So I https://docs.generatepress.com/article/add-entry-meta-to-pages/ , works a treat, yet need to reach out as the tricky custom meta layout David helped with seems to have broken layout/padding. It’s rendering outside the .header.entry-header div, so it’s breaking.

Pls advise, coz I don’t know coz my eyes are melting out of my skull after my 5am start right now.

Page: https://storyclusters.com/unsdg/
Post: https://storyclusters.com/radical-pandas/

Current CSS

/* _meta */
.entry-header .gp-icon {
    display: inline-block;
    font-size: 17px }
.cat-links:before, .tags-links:before {
    display: none !important }
.cat-links, .tags-links {
    font-size: 0 !important }
.cat-links a, .tags-links a, .author-name {
    font-size: 16px;
    margin-right: 0.75em }
.cat-links a:not(:first-of-type):before, .tags-links a:not(:first-of-type):before {
    content: ',';
    margin-right: 0.75em  }
footer.entry-meta {display:none }

[Tom]

Hey Morgan,

Did you fix this? I’m not seeing any differences between the two examples.

Let me know 🙂

[Morgan]

There’s definite differences – note padding, and its happening coz of what I said above – it’s not inside the DIV it should be.

[Tom]

Ah, pages don’t have a hook inside the <header> element, which is why it’s not inside of it.

Try adding this CSS:

.page .entry-meta {
    margin-top: 0;
    background: #fff;
    z-index: 9999;
    position: relative;
    top: -10px;
}

[Morgan]

EDIT: no, that breaks layout, that’s why I’m asking here – because CSS is dependent on meta being inside header.

I tried wrangling it, thought I had it, but everything was broke various resolutions across archive, search and Pages 😛 .

Hoping you can now tell me what’s broken here : https://reel.marketing/unsdg/ , after doing the Meta, then turning off snippet, this header remains broken esp smaller screen sizes. Cannot grok what’s causing it, and .inside-article ... in this suddenly not showing in devtools:
‘@media (max-width: 769px) {
.post-image-above-header .inside-article div.featured-image img { height: 330px }
.inside-article .featured-image + .entry-header {
width: 80%;
padding: 6% 4% 4% 0}’
Suddenly not working.

Is there no way to get a hook inside header for pages?

[Morgan]

– – –

[Tom]

The only way to add it to the <header> element on pages is to copy the content-page.php file in the parent theme, and add it to your child theme.

That way you could add your own hook and use it, as a default hook doesn’t exist there.

Using a child theme: https://docs.generatepress.com/article/using-child-theme/

Let me know if you need more help with that 🙂

[Morgan]

In the interests of getting this site live asap, think I’ll leave it for people that know what they’re doing 😛 .

No plans to add a hook in header/reasons against?

[Tom]

I think a page-specific hook in that area would be beneficial. I’ll log it as something to look at for GP 2.4 🙂

[Morgan]

Good stuff, I’ll stay posted 🙂

[Author]

Posts