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

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

Home Forums Support Center page header/hero with custom margins

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1593681
    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!

    #1594194
    Leo
    Staff
    Customer Support

    Hi there,

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

    You can use the private information field.

    Let me know ๐Ÿ™‚

    #1596001
    Mikko

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

    #1596191
    Ying
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #1596396
    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.

    #1596699
    David
    Staff
    Customer Support

    Hi there,

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

    #1597573
    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.

    #1597937
    David
    Staff
    Customer Support

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

    #1598713
    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.

    #1598999
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.