Heading Module margin and padding sanity check

Beaver Builder
1

Need a sanity check here…

Has the Heading Module always had the margins and paddings zeroed out with !important?

.fl-module-heading .fl-heading {
padding: 0 !important;
margin: 0 !important;
}

I discovered this when using a child theme css file to make some global edits to headings and could have sworn I was able to do this on previous sites.

Thanks!

2

Hmm, I believe so, but at the same time BB modules are supposed to inherit the styling from the theme. I’ve bookmarked your topic and will check to see if this was added recently or it has always been there. :slight_smile:

3

So I’ve spoke to our team and this has been in Beaver Builder since launch. It is there so that you can use the Heading module to manage margin/padding. :slight_smile:

4

Thank you for checking!

5

In using the Heading Module, I don’t see a place to adjust the padding, just the margin. Having the padding set to 0 with the !important tag is making it hard to overwrite it with CSS. Am I missing something with the module?

6

You can overwrite it with a more specific selector, like:

body .fl-module-heading .fl-heading {
        padding: 40px !important;
}
7

Okay thanks. It seems like some poor usage of !important to control styling, but that workaround makes padding at least usable. If padding is going to be zeroed out in the Heading Module, you would think there would at least be a way to change it from the module GUI.

1 Like
8

I would like to second this. While this code might have been included in BB since the beginning, there is good reason to question and possibly remove it. We should be following two truths:

  1. Avoid using !important when possible.
  2. Avoid hardcoding styling, or at least make it configurable via the GUI.

In this case, I want all styling to be dictated my child styles.css. I avoid setting any styling via the module GUI, because we’re trying to adhere to branding and styling guidelines.

Hope that helps! Kris