Trying to make box around comment function smaller, CSS applied in wrong order

Hi, I'm trying to make the border around the comment box smaller, but the 'override' css is applied before the template css for the 'media-left'.
I've made these two css rules and placed them in the 'override' But when I look in the debugger, it's applied in the wrong order.

I've fixed it for now with an '!important'

CSS load order is as follows.

CB Template
CB Template Override
Plugins

So you'll need a stronger selector for your overrides to work or you have to use important tags (not recommended as is bad practice). The best way to make a selector stronger is to take the existing selector that's being used to style it to begin with an adding 1 more class, element, etc.. to it that's within its DOM structure.

For example the padding is being added by the below selectors.

.cb_template .streamItem .streamMediaLeft

and

.cb_template .streamItem .streamMediaBody

You should be able to override their padding with stronger selectors like the following.

.cb_template .commentsStream .streamItem .streamMediaLeft

and

.cb_template .commentsStream .streamItem .streamMediaBody

If you're just wanting to do this for Joomla article commenting then the below would specifically target that.

.cb_template .cbActivityArticleComments .streamItem .streamMediaLeft

and

.cb_template .cbActivityArticleComments .streamItem .streamMediaBody

I see, so it's on purpose that the override is before the plugin, good to know, though I find it a bit odd.
It works with the stronger selection, thankyou!

A follow up question, is there also a 'correct' way of making CB use the font used for the template?

I see, so it's on purpose that the override is before the plugin, good to know, though I find it a bit odd.

I agree it's odd, but at this time we don't have a means of delaying CSS to force it to load absolutely last. It's something we'll be addressing when we redo that API.

A follow up question, is there also a 'correct' way of making CB use the font used for the template?

You can disable CBs Bootstrap if your template loads Bootstrap 3 already. This will prevent CBs namespaced Bootstrap CSS giving Bootstrap stronger selectors. Beyond that, no not without writing new CSS to override CBs.

Is it the 'Twitter Bootstrap' setting under 'Integrations' in Configuration you are referring to as 'Disable bootstrap3'?
Because setting that to No still loads the font.
I've also tried disabling the font awesome, but same result.

Is it the 'Twitter Bootstrap' setting under 'Integrations' in Configuration you are referring to as 'Disable bootstrap3'?

Yes, that disables CBs Bootstrap 3.

Because setting that to No still loads the font.

Inspect the CSS (right click and inspect element) and see where it's coming from exactly. It may not even be coming from CBs Bootstrap or CB at all. Beyond that just use strong selectors or if you must !important tags to force your styling.