Home › Forums › Support › Insert background images (slider effect) in Page Hero Element without plugin?
- This topic has 32 replies, 3 voices, and was last updated 4 years, 2 months ago by David.
-
AuthorPosts
-
November 16, 2018 at 8:49 am #729094DavidStaffCustomer Support
Thats fine, can you also remove the top padding and on the site header page remove the Offset.
Then ill send over some CSSThe div around your title content is also broken….
November 16, 2018 at 8:53 am #729098ElizabethWhat 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.
November 16, 2018 at 8:56 am #729102DavidStaffCustomer SupportIn 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>
November 16, 2018 at 9:05 am #729109ElizabethAha, I found it, thanks! Fixed the markup too. Still sitting underneath the slider though. Css?
November 16, 2018 at 9:06 am #729111DavidStaffCustomer SupportNow this CSS:
.inside-page-hero { position: relative; } .hero-title { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); }
November 16, 2018 at 9:20 am #729126ElizabethTA DA! Thank you very much! We drank our coffee today!!
November 16, 2018 at 9:29 am #729132DavidStaffCustomer SupportAwesome.
Check the mobile version. You need to remove the hero padding for mobile. I would personally set the merged site header to desktop only.November 16, 2018 at 10:44 am #729205ElizabethThank 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!
November 16, 2018 at 10:45 am #729206ElizabethSorry, this one’s at http://enunziato.com/SBP1A to take a look.
November 16, 2018 at 11:25 am #729224DavidStaffCustomer SupportNo problems. Do you want the content to be placed to the side?
November 16, 2018 at 11:27 am #729225ElizabethYes, just like in the sample but on top of the slider instead of a single static image. Thanks!
November 16, 2018 at 11:39 am #729232DavidStaffCustomer SupportOK, 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.November 16, 2018 at 11:49 am #729237ElizabethHmm it’s still stacking it below the slider, am I doing something wrong?
November 16, 2018 at 11:52 am #729239DavidStaffCustomer SupportNope 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….)
November 16, 2018 at 12:34 pm #729260ElizabethAlmost there! It looks great full-size now, but is doing a weird stacking thing when scaled to tablet or mobile…
-
AuthorPosts
- You must be logged in to reply to this topic.