Center page header/hero with custom margins

Hi there,

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

You can use the private information field.

Let me know :)

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

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 :)

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.

Hi there,

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

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.

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

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.

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.