[Resolved] Element – Header adjustments etc

[Tom]

No worries!

In this code: https://generatepress.com/forums/topic/element-header-adjustments-etc/page/2/#post-1155654

Replace generate_before_content with generate_after_entry_header.

For the author, replace this:

.hero-meta {
    display: flex;
    align-items: center;
}

With this:

.hero-meta {
    display: flex;
    align-items: center;
    flex-direction: column;
}

Hope this helps 🙂

[Jacob]

Amazing, Tom. Thanks. It all works!

However now the author image is back in the center of the featured image. Since the H1 is not any longer in the content I tried to take away the CSS:

.page-id-1388 .inside-page-hero {
display: flex;
flex-direction: column;
flex-grow: 1;
}

.page-id-1388 .page-hero {
min-height: 600px;
display: flex;
flex-direction: column;
}

.page-id-1388 .inside-page-hero .hero-meta {
margin-top: auto;
}

Nothing changed, the tags are still in the center of the image. How do I move the tags in the element to appear in left lower corner of the featured image?

Thanks. I think this is it for now 🙂

(Thanks so much)

[Tom]

Try:

1. Removing the top/bottom padding from your Page Hero in the settings.

2. Add this CSS:

.page-id-1388 .inside-page-hero {
    margin-left: 10px;
    margin-top: auto;
    margin-bottom: 10px;
}

[Jacob]

Hi Tom.
When I delete the top and bottom padding, the featured image turns into a thin stripe. I have added the CSS but the author image stays in the center of the image.. (It is strange because it seemed like it worked at first but then something happened and I messed it up somehow.. I can’t figure out what is wrong).

These are all the CSS I have added for the element:

.page-id-1388 .inside-page-hero {
margin-left: 10px;
margin-top: auto;
margin-bottom: 10px;
}

.hero-meta {
display: flex;
align-items: center;
flex-direction: column;
}

.hero-meta img {
max-width: 90px;
margin-right: 20px;
border-radius: 100%;
}
.page-hero {
margin-bottom: 35px;
}
.page-hero {
margin-top: 15px;
}

Thanks for your help.

[Tom]

Ah, you had a min-height applied before.

Try adding this now:

.page-id-1388 .inside-page-hero {
    min-height: 600px;
    display: flex;
    align-items: flex-end;
}

[Jacob]

Thanks Tom it works, but only for 1 page: https://webshopsguiden.se/wix/

All the other pages are the same (feautured image is just a thin stripe and the autor image is in the center).

Really weird..

Thanks!

[Tom]

The CSS is using .page-id-1388.

You need to update that to include other pages, or remove it completely to target all .page-hero elements.

[Jacob]

Thanks Tom I understand but how can I do that?

[David]

Hi there,

your CSS would look like this:

.inside-page-hero {
    min-height: 600px;
    display: flex;
    align-items: flex-end;
}

[Jacob]

Thank you David! That works much better! However this page is still slighly different:https://webshopsguiden.se/wix/

The deafault image is completley contained but more important, the author-meta-image is perfecly placed (margin-left: 10px;).

However, the code that makes the author image stay with a little space towards the left from the image baorder does not seem to work for any other page. Compare with this one for example: https://webshopsguiden.se/woocommerce/ (the author image is not in the same position as the other page)

This is the code that only seems to work for https://webshopsguiden.se/wix/

.page-id-1388 .inside-page-hero {
margin-left: 10px;
margin-top: auto;
margin-bottom: 10px;
}

Thanks!

[David]

Aah yes you need to change that code for this:

.inside-page-hero {
    margin-left: 10px;
    margin-top: auto;
    margin-bottom: 10px;
}

[Jacob]

Thank you for everything! Great service! I will not trouble you more (for now).

Thanks again!

/Jacob

[Tom]

Glad I could help! 🙂

[Author]

Posts