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.
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?