Hello,
I need help with what the most suitable way would be to arrange this layout. I want there to be 56px of padding under the contact form, so it does not overlap with next section.
I would appreciate it I could get some help with this.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi there,
You can easily add spacing under your contact form by adjusting its bottom margin. Here’s how to do it:
Select your Form block, open the Style panel on the right side, and locate the Spacing controls. Under the margin settings, you can adjust the bottom margin by either using the visual controls or entering a specific pixel value in the bottom margin field.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
You may need to share your project link.
There could be a height limitation or a negative margin, setting on the form’s parent container. Or a negative margin, position shift on the form. There are a few different ways to create overlapping elements like this.
Hello thanks for your help.
You need to decide how this will work responsively first, however based on your description, I’d do it this way-
DIV wrapper - relative position
DIV white section
DIV #1 hero section
DIV #2 contact details
DIV #3 follow us
DIV #4 contact form
This will respond naturally to a single column on mobile.
On desktop, you then pull #4 out of position by using position absolute, and give it bottom and right positions, with left and top as auto.
DIV wrapper can also have a bottom padding for the overlap, e.g. 100px
Then on the mobile landscape breakpoint, you undo that, so it flows organically. #4 gets position static, and you can remove the bottom padding.
