SOLVED: CSS Loading Method - External Files - Global Custom CSS are overwritten by the regular front end CSS

Bugs
1

Release: 1.3.4

I’m currently using the new CSS Loading Method with the “External Files” option and my “Custom CSS” added in the Bricks settings are overwritten by the regular front-end CSS.

Steps to reproduce:
1- Create a new design
2- Add a title H1
3- Save the template as you like (section, single etcc…)
4- In the Custom CSS declare a “font-size” for the H1
5- Generate the CSS files
6- Load the page in the front-end
7- The CSS prop are overwritten by the frontend-light-min.css

image

2

Hi Nicola,

extending your custom css to

h1,
.bricks-heading-h1 {
  /* ... */
}

h2,
.bricks-heading-h2 {
  /* ... */
}

/* ... */

will fix your problem. It is due to the specificity of the headings. They each contain a class (.bricks-heading -…) that makes the element more specific than the same element without a class. So actually this is not a bug.

If you like you can simply test it out here and have it displayed visually: https://specificity.keegan.st/

1 Like