SOLVED: CSS class don't work on heading

Bugs
1

Hello if I decide to use a code block to create a text block and apply my global CSS classes to it, they work correctly, but an extra margin is created between elements in the code block.

But if I decided to use two widgets of bricks, the global class for the font is configured only from the edit panel, they do not work by default as the same class that I set in the code block (you can see this in the video)

1 Like
3

Hi @davidovmihail,

This is because you’ve attached the class directly to the h1 in your code block (which is correct), but when the class is added to a heading element, it’s added to the outer wrapper of the heading element, not on the hx element itself.

I’ve added it to our internal bug tracker to get it fixed in one of the next versions. In the meantime, you can extend your custom CSS like so:

.t1, 
.t1 .bricks-heading {
  your styles...
}

The margin-bottom: 0.75em is the default styling that is applied to h1 - h6, but it will be removed from the .bricks-heading headings. We’re currently thinking about adding a margin field to the heading settings in theme styles that will apply to both.

In the meantime you can either reset the default margin:

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

or add a default margin to the regular h1-h6 plus the bricks every .bricks-heading:

h1,
h2,
h3,
h4,
h5,
h6,
.bricks-element-heading .bricks-heading {
  margin-bottom: 0.75em;
}

Best regards,
timmse

1 Like
4

thanks, finally global fonts work as I want