Responsive.css overriding active-styles.css

This topic contains 3 replies, has 2 voices, and was last updated by  Sebastian 6 years, 9 months ago.

Author Posts

ErikHaagensen

Hi Sebastian,

I hope you are having a great day!

I’m doing some preliminary trials with Microthemer on haagenstuff.com, and having a problem where my theme (child of Legenda) appears to be loading responsive.css from Legenda after active-styles.css is loaded from my child theme.

I am specifically trying to move the “Update Cart” button over to the left hand side on the view cart page, making the change on the all devices tab. It works on all devices except for a phone-sized viewport. For some reason responsive.css is overriding the changes at that size.

Here is a support forum thread that addresses this from the theme vendor….
https://www.8theme.com/topic/override-the-reponsive-css-in-the-theme-from-a-child-theme/

At the bottom of that thread are two links to possible solutions…
https://wordpress.org/support/topic/should-not-load-css-after-child-theme
http://wordpress.stackexchange.com/questions/115637/how-can-i-make-new-css-file-in-child-theme-override-styles-in-child-themes-sty

The solutions in these two threads are over my head and I am hesitant to try either for fear of creating future problems particularly at upgrade time. The first link seems to recommend in the end copying all the CSS in parent theme responsive.css into the style.css of the child theme, which seems like it would be break upgrades unless I remembered to do that again. The second link there are two seemingly competing code snippets and I couldn’t really wrap my head around which one to use or why or if that would even be a good idea.

I recently sent you login information when you helped with the Autoptimize issue that is still valid. Would you mind taking a look at this?

Thank you!


Sebastian

Hey Erik,

The solutions you referenced explain how to remove the responsive.css file entirely by pasting some code in your theme’s functions.php file. This isn’t actually necessary for overriding the CSS styles in Microthemer – even though responsive.css loads after active-styles.css. Source order only comes into play when the specificity of CSS selectors is equal. So the trick is to make your CSS selectors have a higher specificity score than the selectors used by your theme.

From the email you sent me, I see that you’ve been inspecting the site with Chrome browser inspector. I will explain how I increased the CSS specificity of your UPDATE CART selector using browser inspector screen shots. You originally had the following CSS selector for the update cart button:

td.actions input.button

override 1

But this selector, which has a specificity score of 22, was being overridden by a selector in responsive.css that has a specificity score of 31 (3 x 10 for classes + 1 for element name).

.woocommerce .cart input.button

In order to make your selector more specific I simply copied the selector and inserted a body tag name at the beginning to give it a slightly higher specificity score (32):

body .woocommerce .cart input.button

override 2

This problem doesn’t happen most of the time because, by default, Microthemer adds !important to all of your styles. It failed to override .woocommerce .cart input.button in this case because your theme also uses !important for the float value of left (by the way I think you meant to say that you are trying to move the button over to the right hand side on mobile, looking at your selector in the Microthemer UI). Normally td.actions input.button would override .woocommerce .cart input.button even though it has a lower specificity score because the !important declaration acts like a trump card. When when two trump cards are played against each other, specificity score becomes relevant again.

I’ve written a tutorial which explains the rules of CSS specificity, which you might find useful: https://themeover.com/beginners-guide-to-understanding-css-specificity/

Does any of that make sense to you?
Cheers,
Sebastian


ErikHaagensen

Sebastian,

Thanks that all made perfect sense. I’d read and enjoyed your guide but obviously just needed some help learning how to apply the theory and use the tools to get the job done.

I was curious if I had needed to add even more specificity what could I have done. I found several mentions of repeating/chaining a classname on it self. For instance….

.woocommerce .cart.cart input.button

So I tested that and it worked as well. Just mentioning it here in case anyone else winds up reading this post.

Thanks for taking the time put together such a great explanation on how to address my issue.

Erik


Sebastian

Thanks for sharing Erik, that technique is new to me!

You must login or register to reply to this topic.