Archived topic
Remove Spacing between blocks
9 replies · Started by Amit on July 16, 2021
Hi, I want to remove the space between two column blocks. Both the blocks divide into two with one side image and the other side text. I want the corners of the image to connect to the corner of the image below.
Also, the image should stretch from the edge of the screen to half the screen covering the grey color from all side within its region.
Hi there,
use the GenerateBlocks Grid Block inside a Full Width Container Block.
In the columns with the image, add a Background Image, and under Spacing set a minimum height ( which will make sure the column doesn't collapse when they are stacked on Mobile ).
The second grid column give it a background color and set some padding, within that a Headeline Block for your text.
Implemented! But can you check as there is still some gap at the top and between the columns of grid! Want to get to the perfection on every screen. The image also seems to be zoomed in!
Hi Amit,
When you use the Grid block, there will be a horizontal gap between containers by default. You can set it to 0.
https://docs.generateblocks.com/article/grid-overview/#horizontal-gap
The image is zoomed in because its size is set to cover. You can change it to contain.
Make sure that the container ratio is the same as the image's, otherwise, there will be some empty space inside the container.
Done that, but there are problems!
1. There is a gap above the first grid. I need that to stick with the first container with greenish background.
2. Please have a check as if it looks weird at any place which I might have been missing.
Select the Grid Block ( not the individual columns ) and make sure you leave the Vertical Alignment to default. This will ensure the Columns are the same height.
You can then select a column block and set its vertical alignment or adjust its padding to center the column with the text.
For the Columns with the background image, you need to change the background image size to cover for it to fill the container.
That will eliminate the spacing issues.
Hi David, all done and implemented on the home page. Can you check if anything looks weird to you or any suggestions for further improvement?
Looks great to me!!
Thanks for the feedback....Solved!
Glad to be of help.
