As I am loving the plugin, I am running into an issue. On my website, I would like to make adjustment to the text that’s in the hero image area or the header. Whenever I inspect the element, I get .subheader as the class to style; however, whenever I make edits to the font-size nothing happens but when I make changes to the font-type etc. I see the changes immediately. My thoughts is that the .subheader class should be .span.subheader. Well this is what I see in the my Google inspector tool.
Unfortunately the image didn’t come through. But as you’ve given me access to your site to fix your plugin conflict issue on the home page, I can see what you mean. Your theme was applying a font-size of 15px using the !important declaration and the following CSS selector:
#page-header-bg .span_6 span.subheader
That selector has a higher specificity score (121) than your .subheader selector, which has a score of (10). The following info about inheritance and specificity may be useful to you if this is a new topic: https://themeover.com/responsive-media-queries/#inheritance
To resolve the issue, I updated your “SubheaderMobile” selector to match the selector used by your theme. You can now adjust the font-size.
-the font size works but the line height doesn’t. Why is that?
-your plugin doesn’t show the scores for the element specificity. Correct?
-How did you update the SubhearderMobile selector to match the selector used by my theme.
I’ll check the line-height issue when I try out the new version of MT that fixes your homepage issue. I’m currently having some issues with node and npm which I use to create new builds of Microthemer, which is holding things up a bit.
No, MT doesn’t provide specificity scores. I may add that in future if I can see how to tuck it into the application in a useful way.
If you click the name of the current selector in the top toolbar, MT will display a field where you can change the selector code. You can also do this via the edit icon in the selectors menu.
