[Resolved] Insert background images (slider effect) in Page Hero Element without plugin?

Home Forums Support [Resolved] Insert background images (slider effect) in Page Hero Element without plugin?

Home Forums Support Insert background images (slider effect) in Page Hero Element without plugin?

Viewing 15 posts - 16 through 30 (of 33 total)
  • Author
    Posts
  • #729094
    David
    Staff
    Customer Support

    Thats fine, can you also remove the top padding and on the site header page remove the Offset.
    Then ill send over some CSS

    The div around your title content is also broken….

    #729098
    Elizabeth

    What do you mean by “offset” there is a section for header padding within Customizing – Layout – Header and I have 40-60 on all sides there, do you want me to remove that? I don’t see an offset option otherwise.

    #729102
    David
    Staff
    Customer Support

    In the Header Element > Site header tab > Offset Site Header Height – is there any value in there?

    Your markup is broken and needs to look like this:

    <div class="hero-title"> 
        <h1>Saint Benedict Parish</h1>
        <h3>Welcome to our Roman Catholic faith community</h3>
    </div>
    #729109
    Elizabeth

    Aha, I found it, thanks! Fixed the markup too. Still sitting underneath the slider though. Css?

    #729111
    David
    Staff
    Customer Support

    Now this CSS:

    .inside-page-hero {
        position: relative;
    }
    .hero-title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%,-50%,0);
    }
    #729126
    Elizabeth

    TA DA! Thank you very much! We drank our coffee today!!

    #729132
    David
    Staff
    Customer Support

    Awesome.
    Check the mobile version. You need to remove the hero padding for mobile. I would personally set the merged site header to desktop only.

    #729205
    Elizabeth

    Thank you! I’m sorry to bother you again, but I’m adding a slider to a second version of this site and trying to place it behind the content box and buttons pulled from the hero sample 3 at https://docs.generatepress.com/article/page-hero-examples/. I know there’s overlap but I’m not sure what to remove/add to fix. Please advise if you can!

    #729206
    Elizabeth

    Sorry, this one’s at http://enunziato.com/SBP1A to take a look.

    #729224
    David
    Staff
    Customer Support

    No problems. Do you want the content to be placed to the side?

    #729225
    Elizabeth

    Yes, just like in the sample but on top of the slider instead of a single static image. Thanks!

    #729232
    David
    Staff
    Customer Support

    OK, so remove this CSS, as we won’t be able to use the CSS grid method as the slider is falling into that.

    .inside-page-hero {
        display: -ms-grid;
        display: grid;
        grid-template-areas: "left right";
        -ms-grid-columns: 50% 50%;
        grid-template-columns: 50% 50%;
    }
    
    .page-hero-content {
        -ms-grid-row: 1;
        -ms-grid-column: 2;
        grid-area: right;
    }
    
    @media (max-width: 768px) {
        .inside-page-hero {
            display: block;
        }
    }

    And then replace this CSS:

    .hero-title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%,-50%,0);
    }

    with:

    @media (min-width: 768px) {
        .hero-title {
            position: absolute;
            top: 50%;
            right: 10%;
            transform: translate3d(0%,-50%,0);
        }
    }

    the right property positions it 10% away from the right border. reducing it will move it further right.

    #729237
    Elizabeth

    Hmm it’s still stacking it below the slider, am I doing something wrong?

    #729239
    David
    Staff
    Customer Support

    Nope it was all me lol that last piece of code above beginning with @media i just edited ( i got my min and max mixed up….)

    #729260
    Elizabeth

    Almost there! It looks great full-size now, but is doing a weird stacking thing when scaled to tablet or mobile…

Viewing 15 posts - 16 through 30 (of 33 total)
  • You must be logged in to reply to this topic.