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.
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?
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
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
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.
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.
.
