How we reset Elementor’s column gaps to align with parent sections.

Elementor is a great tool to build custom sites in WordPress. It allows you to build just about anything you want. We’ve used it on the last 4-5 sites we’ve created including this website. We like that Elementor gives us the freedom to build sites quickly. But sometimes being tethered to a framework can create challenges when trying to make everything pixel perfect.

One issue we’ve run into is keeping multi-columns sections lined up with their outer parent sections. Elementor doesn’t use a true CSS grid system. It can be difficult when creating multi-column layouts. But with a bit of CSS, we can make it behave a little more like a traditional CSS grid system.

You’re going to need an alignment.

So what’s the issue with Elementor’s column alignment? Elementor automatically applies a default amount of padding to every inner column of each new section created. This padding is harmless along as everything remains in a one column stack. But, if you create a multi-column section below a single column you will start to see the outer alignment of your sections are not aligned. The Elementor setting that adds this padding is called Columns Gap.

What are columns gap?

Column gaps are Elementor’s setting to apply a set amount of padding to every inner column Elementor creates. Whether it’s a single column or multi-column, you can choose how much padding gets applied. The padding that gets added makes sure columns don’t collide as your screen size changes from mobile to desktop. It also gives the columns some breathing room so your content is easier to read and look more visually appealing.

Elementor gives you 6 options to increase the padding from 30px at it’s highest setting down to 0px at its lowest. Elementor doesn’t tell you how many pixels you are adding with each setting. But, we’ve broken them down to show just how many pixels each option applies.

Default: 10px;
No-Gap: 0px;
Narrow: 5px;
Extended: 15px;
Wide: 20px;
Wider: 30px;

On its own, the Columns Gap options are a great solution for adding padding to your columns with a quick drop-down. The problem for us is when this the gap is applied, it doesn’t line up to the outer most edge of the maximum width of our layout. We like everything to line up on both the left and right of our sections. We are always trying to build pixel perfect experiences.

So how do you fix it?

We’ve uncovered up a couple of ways to fix the alignment. You can continue using the options Elementor provides and with a little CSS added to your project, things will start lining up again. These fixes work with any Columns Gap setting you select. It works for nested columns and they work on mobile, tablet and desktop.

How does it work?

Let’s first take look at the underlying structure that Elementor uses to build sections and columns. The padding that gets applied is not applied directly to the element you are editing. It actually gets applied a few elements deep. It adds padding to all four sides of the element. The top and bottom padding are fine. And in fact, you want to keep this because it will help keep space your elements as you shrink down to mobile screen sizes.

There are only 2 paddings from each setting that cause the alignment issue. The left-padding on the first element and the right-padding on the last element. We need to remove or adjust both to make things line up as we want them.

Method 1 – Just nuke it

This option simply selects the first and last columns of a section and completely removes the padding from the left of the first element and the right of the last. This option can look a little more daunting because it requires more CSS. You have to use more selectors to find and adjust the column elements. And you have to apply it for every setting. But it completely removes the unwanted padding at the element level.

To start you will want to completely remove all left and right padding for smaller screen devices. Elementor will stack multi-columns into single columns below 768px screen width. We use the max-width media query to do this. It will remove these padding on all columns for screens smaller than 768px wide.

@media (max-width: 768px) {
	.elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated {
		padding-left: 0;
		padding-right: 0;
	}
}

Next, you will create a CSS rule for screen sizes greater than 768px. This set of rules will only remove the left padding on the first column and the right padding on the last column.

@media (min-width: 768px) {
	
	.elementor-column-gap-default>.elementor-row>.elementor-column:first-child>.elementor-element-populated {
		padding-left: 0;
	}

	.elementor-column-gap-default>.elementor-row>.elementor-column:last-child>.elementor-element-populated {
		padding-right: 0;
	}
}

You will need to create the same set of rules for every Columns Gap setting if you want to override the default behavior. This example only removes the padding for the Default setting.

Method 2 – A negative can be a postive

This method uses less CSS and leaves the padding untouched on the column elements. We found this solution inside a plugin that you can install and use within Elementor itself. The plugin allows you to toggle the adjustment on a per section level. You can find it in the WordPress plugin directory. We prefer to make the setting global. To do that you need to add the plugins CSS directly to your styles.css file in your theme.

If you don’t want to install the plugin, or want the setting to be global, which is what we do. You can simply pull the CSS and add it to your styles.css file in your theme.

It corrects the alignment by shifting the margin of the outer container left and right the number of pixels each column gap applies. It then makes use of the CSS calc() function to increase the width of the container 100% + the negative margins by 2.

.elementor-section > .elementor-column-gap-default > .elementor-row {
	width: calc(100% + 20px);
	margin-left: -10px;
	margin-right: -10px;
}

.elementor-section > .elementor-column-gap-narrow > .elementor-row {
	width: calc(100% + 10px);
	margin-left: -5px;
	margin-right: -5px;
}

.elementor-section > .elementor-column-gap-extended > .elementor-row {
	width: calc(100% + 30px);
	margin-left: -15px;
	margin-right: -15px;
}

.elementor-section > .elementor-column-gap-wide > .elementor-row {
	width: calc(100% + 40px);
	margin-left: -20px;
	margin-right: -20px;
}

.elementor-section > .elementor-column-gap-wider > .elementor-row {
	width: calc(100% + 60px);
	margin-left: -30px;
	margin-right: -30px;
}

Bonus

If you find you’d like more padding than any of the presets Elementor offers, you can always override it with a bit of CSS. You can adjust one or all of the presets. In the example below, we’ve increased the Default setting to 45px. Again simply add this to your styles.css file located in your theme.

.elementor-column-gap-default>.elementor-row>.elementor-column>.elementor-element-populated {
	padding: 45px; // Make this any number you want
}

That’s it. We hope you find these methods helpful with the outer alignment of your columns in future Elementor projects. Elementor is a great tool when it comes to building and designing WordPress sites. We hope you can use this to make your designs even better.

Share on facebook
Share on twitter
Share on linkedin
Share on reddit

Leave a Comment