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.
Sign Up to Get Our Latest Posts Tuesdays and Thursdays
No Spam, Period. Just the latest posts.
Let me know if it works or if you have trouble here: Get Started
