SOLVED: Default classes added to elements such as <span>

Bricks Version: 1.5.3
Browser: Firefox (latest)
OS: macOS
URL: Medias – Antoine Leclef

I was trying to implement a CSS ribbon (from : https://codepen.io/nxworld/pen/oLdoWb ) on my cards pulled through a loop.

Something was continously wrong in the CSS, and there were conflicts. I think I identified the conflict/problem coming from the fact that default classes (and therefore CSS) was added to elements.

I gave the Basic Text element (that contained the ribbon text) a html tag as needed by the CSS given in the ribbon effect tutorial. That worked, but still there was a conflict. Then with the code inspector I realized that the tag seems to add classes “brxe-rnrlcg” and “brxe-text-basic”. The first one seems to be the ID transformed into a class with a default “width: auto;” and the second one is added when giving the html tag , and it comes with this CSS that messes it all up : “width: 100%;”. When I deactivate both classes, the ribbon effect works perfect.

I hope my situation is isolated, but it seems that Bricks is adding default CSS that should not be there, a div should be clean 100%. Am I wrong somewhere ?

Hi Anlip,
Thank you very much for your report!

Basically, the default styles are there for a reason and not because we want to annoy you :wink: If we remove those, I don’t want to know how many places there will be problems that weren’t there before.

You only need to make minimal changes in two places in the custom CSS: width and max-width.

.ribbon span {
  width: 225px !important; /* to override the width: auto default */
  max-width: unset; /* to unset the max-width */
}

Best regards,
timmse

Hi timmse, thank you for your reply.
I totally did not want to make you feel accused, sorry if I did. Nevertheless, I don’t really understand why add default styling in the first place. Now, I understand it is “too late” to change it without causing a lot of problems, but why in the first place ?
In the meantime, I changed my design and will not implement the ribbons, but thanks for the custom CSS.

I think it is valuable to acknowledge that Bricks is a young tool. It is an amazing product for its youth: learn its quirks, contribute to its evolution, foster the positive and supportive community which has sprung up around the tool, and enjoy the process.

Yes, yes, and YES. This is a users’ forum, supposed to be here for bug identification, not only for messages of :heart: hence my remarks about CSS being added to every DIV. I, personnaly think this CSS shouldn’t be there.

2 Likes