Site logo

Archived topic

block-page-hero

7 replies · Started by Horst on May 7, 2021

Viewing posts 1–8 of 8

Hi there,

are you wanting to change the alignment depending on what post you're viewing ? Or apply those changes globally ?
I am not sure i fully understand what your trying to fix / achieve

Hi,
I would just like to move the content to the left for this header (for all posts with it). Actually, I want to move it up a bit so that it (content) protrudes into the header. That then globally for the relevant header.
Thanks.
greetings
horst

Aah ok - thanks for explaining - i was obviously not reading correctly :)
So few steps:

1. Edit the Hero - and select the parent container block, in Advanced > Additional CSS Class(es) add a Custom Class eg. single-post-hero which we can then use in our CSS.
2. Delete the Empty Paragraph block that is below your parent container ( select it and backspace delete ) - as we need this out of there the CSS to work.
3. Add this CSS:

.single-post-hero + #page #content .content-area {
    margin-top: -100px !important;
}

This will adjust the content-area only within our #page container that comes immediately after our single-post-hero container.

Hi,

one part works very nicely. Thank you until then.
But I can't manage to align head and content equally to the left (i.e. not centered). In addition, the text disappears when I move the content container up (200 px).

Can I use this "trick" to color the background color differently. So that it is the same color as the shapes? Then it would be really great and I would have learned a lot again.

best regards
horst

please refer : https://horstschulte.com/2021/331-von-ueber-400-gesundheitsaemtern/

Hi Horst,

Are you trying to achive something like this?
https://www.screencast.com/t/OStLY2nQ

If so, try this CSS to align them to the left:

.single-post-hero .gb-inside-container {
    margin-left: 60px;
}
.single-post-hero + #page #content {
    margin-left: 60px;
    padding-left: 0;
}
.single-post-hero + #page {
    margin-left: 0;
}

For the background color, I don't think there's a way.

Hi Ying,
Thank you very much for the help. I've now solved it a little differently in terms of color. With white instead of dark gray. :-) Also works.

Thank you again.

greetings
horst

No problem :)

This archived topic is closed to new replies.