Adding 2nd Parallax hero

  • Resolved yumiko

    (@yumiko)


    1 year, 5 months ago

    Someone please help me: I want to add a second Parallax hero to my Storefront top page.

    Since I already have one, I used short code to add a new one to the page that is set as Storefront Homepage. So it appears but with a few isses.

    Issue 1: Now there is a huge – over 200px? – space between the new Parallax hero (flower image) and the original one (ocean image) below.

    Issue 2: The new Parallax hero is not quite full-width.

    URL: https://box5663.temp.domains/~iwufohmy/061123hgo/

    Thanks!!

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • #post-3168 {
  padding-bottom: 0;
  margin-bottom: 0;
}
#post-3168 section {
  margin-bottom: 0;
}
#post-3168 section {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: auto;
  background-size: cover !important;
}
    Thread Starter yumiko

    (@yumiko)

    Thank you, Lorro! For some reason, though, I still don’t get it right. Any idea why?

    Also, how do you find the post-3168 ID? The site I shared is a staging site and I need to replicate it with my real store site.

    Much appreciated it!

    Thread Starter yumiko

    (@yumiko)

    With View>Developer>Inspect elements, I see “div.overlay.animated” but that is it.

    Thread Starter yumiko

    (@yumiko)

    I found div id=”post-3168″ so please disregard that part of my question.

    But then why the css is not working for me??

    Thread Starter yumiko

    (@yumiko)

    Hi Lorro, Sorry to bother you again.

    Using Chrome>View>Developer>Inspect elements, it suggested to use “div#” and “section#” instead of “#” and “#post-3168 section”. With this alteration, your CSS worked great! Well, it looked good on Inspect elements.

    But when I made this alteration in Customise > Add CSS, that didn’t produce the change on the page.

    Any idea why this is the case? I appreciate your help.

    Sorry for the delay in responding.

    I’m getting site-not-found. Please post the new address of the site.

    Please copy and paste the whole of the Additional CSS to this service to validate it. Sometimes brackets and punctuation can be mis-matched:
    https://jigsaw.w3.org/css-validator/#validate_by_input

    Thread Starter yumiko

    (@yumiko)

    Hi Lorro,

    Thank you so much for following up. I made a new thread, you responded, and the issue is all solved.

    Thank you again for your generous support.

    Plugin Support Beauty of Code (woo-hc)

    (@beautyofcode)

    Hi @yumiko ,

    Glad to hear that @lorro has managed to help you toward achieving your desired results!

    I will go ahead and mark this as resolved then – feel free to?create a new topic?if you need further help.

    Cheers!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Adding 2nd Parallax hero’ is closed to new replies.