No gap between modules
by Andras Guseo | The divi magazine © 2015
Achieving no gaps between modules in Divi is quite easy. Simply the widths and the margins of the different columns need to be changed with a short CSS code.
All you need to do is the following 2 steps:
- In the Section where you want to remove the gaps, add the CSS class
no-gap - Copy the below lines to your theme’s style.css file or add it in the Appearance > Divi Theme options > General > Custom CSS box.
/* NO GAP BETWEEN MODULES
------------------------- */
.no-gap .et_pb_column_1_2 {
margin-right: 0;
width: 540px;
}
.no-gap .et_pb_column_1_3 {
margin-right: 0;
width: 360px;
}
.no-gap .et_pb_column_1_4 {
margin-right: 0;
width: 270px;
}
And now let’s see some examples.
Here are 4 image modules next to each other as it normally would be.
(Images courtesy of my friend, Lukas.)
And now the same without gaps.
It looks simply better.
It also works with 3 columns.
Or with two.
And what do you know, even with mixed column sizes.
Although this needs some extra settings. For the top images set Remove Space Below The Image to Yes and set the bottom margin to zero.
Does it work with any other modules?
Of course, it effects the column sizes, not the modules. So all modules are affected.
The most visible result you will get when using images and Call to Action modules with different color backgrounds.
Oh, did I mention...
… it also works with with Call to Action modules.
To properly align Call-to-Actions you also need to mess around with other settings. Which might be the topic of a future post.
Go
Want to share your result?
If you want to share what you achieved with this, drop me a line and I’ll include a link to your page to showcase it.
Do you need help in implementing?
If you need some help or you need some adjustments, then drop me a line.
And please like / share this page if you liked it.
And a total mix for the end.
Check the store...
… for some more goodies.
Doesnt work divi 2.5.3
Hi Hanfai,
In divi 2.4 and above the same effect can be achieved with the settings for the sections, rows and modules. Let me know if you need any help with that.
I tried this in 2.7.3 and it didn’t work for me. There’s a large amount of space between my header and menu in the module. I also tried using the custom padding option but that didn’t work either. Any thoughts?
Hello I tried this and it worked for me – but how can I get the four images to be on the one line rather than 3 on the top line and then the forth one is under the first image.
This works just as advertised. Thank you. I do have one question. It’s not very responsive. Is there a way in the code to make the images shrink as opposed to dropping down a line? When I look at this on a smaller screen, or I shrink the size of the browser, the effect is ruined. You can see what I’m talking about at the head of my website
I am looking for some code to do this for SECTIONS. ie no gaps as you scroll top to bottom.
Any help would be great
Hey Ryan, thanks for reaching out.
I believe what you are looking for can be done in the section settings / options. Just set the top and bottom margins and / or paddings to 0 of each section. Hope this helps!
Cheers,
Andras