Archived topic
Block Page Hero Order
8 replies · Started by troyw on November 3, 2021
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
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.
All good, thanks Ying
What about the responsiveness of the divider?
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.
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
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
Hey Elvin,
That seems to do it with a bit of adjusting. Thanks so much.
No problem. :D
