Huge spacing gaps before and after pricing tables

Hey OnedayIllfigureitallout,

If you're still having these issues, are you able to share a link to an example page?

One way to equalize the heights of the pricing tables would be to set a minimum height on the titles that is at least as large as the height of the two line titles. If the individual elements in the pricing table have a standard height then so will the table as a whole, and it'll also mean that things like the button line up correctly. Again, if you're able to share a link we should be able to tell you how to do that (am I right in thinking that it's a third-party pricing table module, rather that the built-in Divi one?).

 

You're welcome! I'm glad the title min height helped.

No worries on the staging link. Of course, it's had to say for sure what's causing the gap without examining the page directly, but margin and padding are common culprits. You mentioned setting the paddings to 0. Maybe do the same with the margins and see if it improves things further. One way to track it down is to right-click in the middle of the gap and select "Inspect element" in the browser menu. Doing that should bring up the browser debug tools and highlight the element on the page which is responsible for the margin / padding filling the gap.

Another thing that can cause this type of gap is the position settings, found in the advanced tab of the Section / Row / Module settings. The equivalent in CSS is the "top / bottom" properties. If these are set, they can offset the element from its surrounds, creating a gap. Try clearing them if set and see if that helps.

 

Thanks for that. Yeah, it certainly looks like the gap is coming from the pricing table rather than anywhere else. Unfortunately, I still can't see enough to tell you what exactly is going on.

One way to select an element, without triggering the hover effect, is using the "Inspect Element" button in the browser debug tools, e.g.:



Click it, then hover over the gap and it should highlight the affected element. Click on the element now and it should become selected in the debug tools elements tab. Now, in the debug tools, you should be able to see the CSS styles applied - hopefully you'll be able to spot the one creating the gap. Take a look at things like the height and min-height as well, which might be making the module larger than its (unhovered) content.

If you still can't locate it, you could try re-creating the pricing table - keep checking on progress as you go and hopefully you'll either identify the change that is causing the issue, or it will work correctly and you can use it to replace the original.

Good luck!

 

Good luck with it!