the sky floor

October 7, 2021

Simple CSS Trick for Column Spacing in Elementor and Other Page Builders

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

Have you ever noticed that when you are using a page builder, the ends of paragraphs often add extra space? This extra space ends up changing how your content sits in the column, messing up middle vertical alignment, or creating too large a gap between content.

Here is a little CSS to help.

				
					p:last-child {
margin-bottom: 0px;
}
				
			

Add this to your Customizer > Additional CSS or put it in your theme CSS before you start building to eliminate this gap. 

Here is a quick explanation of what is going on here if you aren’t familiar with CSS. We need to remove the gap at the end of a paragraph, but if we set the margin to 0px on all paragraph elements, we will have no paragraph breaks! That will be worse than having a phantom space. 

So we are using a selector type called pseudo, which can target just one tag location amongst many. In this case, we are saying to the web browser to remove the bottom margin only when it is the last paragraph tag in an area. 

Hopefully, this short lesson will help you tame the phantom spacing when mixing themes with Elementor and other page builders. 

Let me know if it works or if you have trouble here: Get Started

More to explore

Close up shot of fresh negroni cocktail made from skilled bartenders
August 31st
Get the Latest from the sky floor
no spam, guaranteed

the sky floor

© 2021 The Sky Floor, LLC

Once a Week Email

Every Monday the Latest Ideas Right to Your inbox. No Spam, Period.