Archived topic
Landing page with negatuve bottom margin
6 replies · Started by Juan on May 23, 2021
I am trying to make a landing page for a book.
At the moment I have made a container where I placed a grid with two columns. In one I placed a text and in the other an image, the one of the book.
To make the container more attractive, I added a shape at the bottom.
The problem I have is that I need to add a bottom negative margin so that the image of the book is a little outside the container, but I can't find a way to make the image of the book be above the shape.
Any suggestions?
Unreal. After two hours of debugging this issue myself I thought I'd finally give up and ask the forum. I just don't know what's going on. I've googled for two hours and found no help and nobody with this same issue.
I open the forum. At the very top I see your thread. My issue is IDENTICAL.
Ridiculous!! We're the first two with this issue and we were both going to make threads about it right after each other this evening. Crazy.
Rather than open a new thread I can just give this one a bump I guess.
My issue is identical.
My layout works with the Float-based layout but when I switch to the Flexbox-based system it doesn't.
Tried changing all border-box box-sizings to content-box but that doesn't fix it. Not sure what change GP3 could introduce that makes this no longer work?
Thank you!
Hi Juan,
Basing on the screenshot, I believe you're using GenerateBlocks? You can try adding/removing a negative margin on the container block that's holding the shape and the particular content.
But I can't be sure unless I fully inspect the site.
I've tried accessing the URL you've linked and the page doesn't seem to be loading.
Can you check and confirm if the site is up and running? Let us know.
@NrH,
Can you link us to the page in question as well? to inspect the site and give an appropriate fix.
Yes, I am indeed using GenerateBlocks, I always forget to clarify that point :).
I solved the problem, I think resting in my bed after a long day of work helped me to think more clearly.
I solved it as follows:
- To the main container I assigned internal z-index: 1.
- To the form a I assigned z-index: 2
- To the container (one of the gird tables), where the image of the book is, I assigned z-index: 3
In this way, when placing a negative bottom margin to the image container, it is placed on top of the shape. And the main container does not overlap the shape.
Ah yes that makes sense because by default, the element that appears further down the DOM structure generally overlaps its siblings and since the shape comes after the container, z-index had to be specified.
Thank you for sharing it with us. Glad you got it sorted. :)
Is there an email one can send support queries to? I can't find GP's support email anywhere. Really love to get this fixed. I've tried everything and one random thing fixes it but it isn't a viable solution.
Can I email you somehow to get support for our problem?
Thank you in advance!
Hi there,
if you can raise a new topic, you will find a Private Information field where you can share a URL/login for your site so we can take a look at the issue.
