Bullet list with icons

Beaver Builder
1

I’m trying to make a bullet list using the icon module (see here, second section “Om Yoga”). But I’m not able to remove the padding/margin between the bullet points. I set margin to 0, there are no padding options, so I don’t know what else I can do. Right now the gap between the two points is too large. Do you have any idea how this could be done?

Thanks
Fabian

2

Hey Fabian,

There is a default left padding of 15px on the text. But we should be able to override that using the CSS snippet below.

.fl-icon-text {
  padding-left: 5px;
}

Let us know how it goes! :slight_smile:

Ben

3

Hi Ben,

I’d like to bring the two points closer together vertically, I’m not talking about the horizontal gap between text and icon. Padding left refers to the latter, right?

4

Gotcha! Yep, padding left refers to the spacing between the icon and the text. :slight_smile: The page is resulting to a 404. Are you working on it?

Ben

5

Yes, it’s available now here. Haven’t found a solution yet, any ideas? Thanks.

6

Hey Fabian,

The CSS snippets below should do the trick!

.fl-module-icon .fl-module-content {
  line-height: 0;
}
.fl-module-icon .fl-module-content .fl-icon-text {
  height: auto;
}

If you need to add more vertical space, simply add a bottom margin to the modules. :slight_smile:

Ben

7

Thanks Ben! That’s better now!

8

Awesome! Enjoy BB! :slight_smile:

Ben