Bricks Version: 1.5
Browser: MS Edge
OS: Windows 10 Home
URL: https://annex.pdms.ca/natural-treatment-options-for-utis/
I’m seeing several declarations of the following code in the individual post css files (ie; post-5730.min.css):
brxe-image{ margin: 0; }
Our CSS class framework is not able to override the margin on an image so we’re currently forced to wrap the image in a div/container/block so that we can add margins using our CSS class framework.
Hi Chris,
Thank you very much for your report!
The margin: 0 is originally coming from frontend.css (as far as I can see with inline styles), but I cannot say what’s its purpose. As soon as you add a class to the image, the default margin should be overridden as the margin class is attached to .brxe-image.
However, in your example URL, I don’t see a class that adds a margin to the image or block element so it’s hard to say if there is anything wrong 
Best regards,
timmse
Hey Stefan, sorry should clarify. Our CSS class framework has spacing/padding utility classes that are defined in a separate stylesheet. For example, “.c-mt-3” would add 24px of margin to an element and is defined:
.c-mt-0{
margin-top: 24px;
}
The styles are not defined in the builder. If you add a class and style it in the builder, then the class that’s generated looks something like this:
.c-mt-3.brxe-image{
margin-top: 24px;
}
Because that’s a more specific selector it overrides the .brxe-image margin defined in the post-9522.min.css file that Bricks generates.
Here’s a video with a more detailed explanation:
Hello @ChrisCastillo,
Thank you for the video clarification. Yes, it is weird to have all those post-XXX.min.css files loaded on a single blog page. Usually, you should have 3-4 external files: header, footer, content, and maybe 1 for a section template. Anyway, this is not the main issue for you at the moment.
How to make sure your CSS framework class overrides the Bricks class?
Did you try to increase the priority number of the hook callback where you enqueue the CSS framework files?
Could you please test it with 99?
add_action( 'wp_enqueue_scripts', 'your_callback_to_enqueue_css', 99 );
Let us know if that solves the issue.
Thank you
Luis
Hey Luis, the increased priority fixed this! Thank you!
FWIW - I still see all of the various post.min.css files being loaded. Can that .brxe-image{ margin: 0; } not be removed from the CSS that’s generated by Bricks and moved to the frontend.css file instead?
Also seeing a similar issue to this
Post-11 is my Header
Post-473 is the page I am building
Post-156 is my Footer
@timmse as Chris has stated above, can these bricks header/footer styles be moved to frontend.css to stop the duplication
Hey guys,
It’s not as easy as it sounds, but we will, of course, take care of it in due course.
However, we are also a little afraid of tackling this because it could lead to Bricks becoming faster than light (just kidding) 
