[Resolved] Block Page Hero Order

Home Forums Support [Resolved] Block Page Hero Order

Home Forums Support Block Page Hero Order

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1990544
    troyw

    Hey team,
    I am using a Block Page Hero Element to create a divider between the header and the content on all pages of the website except the home page. The divider is an SVG image which I added to to Shapes using your Generateblocks Pro Assets. This works well, but seems to have a couple of small flaws.
    The first is that the divider is placed on top on the content, so chops off the top of the content. How do I get it to sit behind the content, but in front of the Header Image?
    The other issue, which I am not sure is fixable, is that when I shrink the browser window to see the divider in Tablet or mobile view, it seems to squeeze just the width and not the height of the SVG Shape? This looks a bit odd and I would prefer the SVG retain its shape on all devices.

    Thanks

    #1990631
    Ying
    Staff
    Customer Support

    Hi there,

    You can add a z-index value to the container which holds the shape, eg.1.

    Then add a z-index value eg.2to the container below.
    https://docs.generateblocks.com/article/container-overview/#outer-z-index

    Let me know if this works.

    #1990648
    troyw

    All good, thanks Ying

    #1990651
    troyw

    What about the responsiveness of the divider?

    #1990656
    Elvin
    Staff
    Customer Support

    Hi there,

    What about the responsiveness of the divider?

    Do you have any specific responsive layout in mind? Can you specify how you want it to behave?

    Let us know.

    #1990661
    troyw

    Hey Elvin,
    I want the divider to appear the same on all devices and browser widths. If you reduce the width of your browser, you will see that the left of the Divider Shape increases in height? How do I stop the height increasing and keep it looking like it does when viewed on a desktop?
    Thanks

    #1990671
    Elvin
    Staff
    Customer Support

    Technically, the height didn’t change. It just happened to look to big on mobile. (400px looks fine on desktop, too big on mobile)

    Consider changing the height of the shape on mobile to a smaller size – https://share.getcloudapp.com/llukNZZ0

    #1990677
    troyw

    Hey Elvin,
    That seems to do it with a bit of adjusting. Thanks so much.

    #1990678
    Elvin
    Staff
    Customer Support

    No problem. 😀

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