[Support request] Center page header/hero with custom margins

[Mikko]

Hi,

I want to apply margins to my page header/hero but when I apply it the hero floats left.

I tried to work some flex-box solutions but couldn’t figure it out.

I don’t want to use “auto” for left and right margin.

I have set both inner and outer column “contained”.

Thank you very much!

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Mikko]

I’ve attached site in the private information section that demonstrates this issue.

[Ying]

Hi Mikko,

You have this css added:

/* Page hero */
.page-hero {

    background: transparent;

    padding:60px 40px 50px;

    border:solid #00ff00 2px;

    margin:10px;

    color: #00ff00;

}

Delete the margin: 10px;, the page hero should be aligned center by default.

Let me know 🙂

[Mikko]

Hi Ying,

I want the hero to have custom margins and still have it centered.

I can adjust the bottom and top margin without problems but the sides are the problem. I want to apply let’s say that 10px margin but then the hero floats left.

I tried “flex-box” but I couldn’t make it work.

Thank you very much.

[David]

Hi there,

are you wanting to adjust the horizontal position of the Hero Content ?

[Mikko]

Hi,

I want the whole hero horizontally aligned to center. I don’t care about touching the content inside it for now. I want to add 10px margin on all sides of the hero element without it starting to float left.

Thank you.

[David]

So should this Hero fill the width of the browser minus the 10px margin ?

[Mikko]

Hi,

I have set both containers “contained” for my page hero.

I don’t want it to fill the browser width.

I want the hero to be width that I set the website to be minus the margin.

Thank you.

[Elvin]

Hi,

You can try this:

1.) Wipe all your custom CSS related to adding margins to the page-hero. Make sure to remove the grid-container on the Header Element classes as well.

2.) Create 2 Hook Elements.

3.) For the 1st Hook Element, set its hook to generate_after_header and set its priority to 1 and add this code:

<div class="hero-wrapped grid-container"> 
<style> 
.hero-wrapped{ width:100%; }
.page-hero{ margin: 10px; }
</style>

4.) For the 2nd Hook Element, set its hook to generate_after_header and set its priority to 9999 and add this code:

</div> <!--hero wrapped>

This wraps the page hero within a <div>. It also respects the set max-width to the grid-container and also adds margin to page-hero.

Note: you can remove the <style></style> on step 3 and put its CSS contents on Appearance > Customize > Additional CSS if you want all the CSS to be gathered in one place.

[Author]

Posts