[Resolved] after_header hook to add margin?

[William]

Hi there,

My current header is all done using the page hero element – this makes it easy to add margins to a box, for example. See here by moving the width of the browser in and out – it always has a margin to the left and right.

The problem is that the specific element cannot be used in the block editor. With this, I made something to replace it, but have had to use the after_header hook (closest hook to the page hero, I believe).

With this, I currently don’t see a way to add a margin to the box I’ve created in this element. Is there a way to do this?

Staging details to view in private.

Kind regards,

Will

[Leo]

Hi William,

Sorry I’m a bit confused.

Are you referring to this element here?
https://www.screencast.com/t/2S1wPsTwJmgi

If so wouldn’t you be able to control all the paddings and margins using GB’s container spacing settings?
https://docs.generateblocks.com/article/container-overview/

[William]

I would have thought so. However, it seems no matter what margin right/left I put, the container still does not have a margin to the right/left so when the browser width reduces, it does not have a margin (but sticks to both sides of the browser)…that is until it gets to tablet and mobile widths.

You can see here.

[Ying]

Hi Will,

If a container block is set to contained width, left/right margin value will be replaced by auto no matter what value you entered.

This is to make sure the container block stays in the center horizontally.

I would suggest setting the container block back to full width and changing the page hero hook to before_main_content

[William]

That does not make it full width like a page hero (sidebar appears alongside the element).

I basically want the same as page hero but with blocks – is there anyway at all to do this currently, where you can achieve a margin left and right?

[Ying]

Hum.. give inside_site_container a try.

[William]

Hmm, not quite – causes the margin to appear even on very wide screens.

I managed to find a fix – use the after_header hook and apply this CSS:

.gb-inside-container {
margin: 0px 10px 5px 10px;
}

It’s a little annoying as had to add an HTML block to add the CSS, but it works for what I am trying to achieve.

Thanks for your help on this anyway!

[Ying]

Glad you figured out a solution 🙂

[Author]

Posts