Blog

How To Fix The Horrible List Margin Spacing In Kartra

One of the frustrations that I’ve been dealing with for the past few years since using Kartra has been the list margin spacing that I haven’t been able to figure out how to fix.

Let me show you what I mean.

This image is where you’ll find the Block Templates found under Components/Lists. The first block template has the check marks template that are incredibly popular to use on a sales page.

Upon first inspection, this block looks great. However, I want you to notice the space between the paragraphs and header.

When used, I usually delete the regular body font and leave the top heading text to create a benefit list.

The spacing becomes a HUGE problem at this point.

See…

Ugh. It kinda kills the whole beautification of the sales page.

There is nothing in the margins or line spacing that can fix this.

So, I took this issue to the Kartra Community over on Facebook and asked.

And from this…something magical happened…

I got an answer from Brian Katzung where he shared an ultra nerdy and brilliant idea. He suggested using this CSS code trick, and TA-DA – IT WORKED! Yay! Thank You Brian!

Here’s the code Brian shared:

 

.kartra_list__item–margin-bottom-extra-small { margin-bottom: -10px; }

 

I ended up changing the -10px to -15px and this is how it now looks on the sales page:

*SIGH* Isn’t it beautiful?

If you’ve had this same issue and frustration, I hope it helps you as much as it’s helped me.

 

Interested in giving Kartra a try? Sign up for a 14-Day trial for only $1!

Leave a Reply