Text-size is not working on specific elements

Tagged: , ,

Author Posts

juliusrainey August 30, 2017 at 8:53 pm

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

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.

Any idea what’s going on?

Sebastian August 31, 2017 at 9:51 am

Hey Julius,

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.

Cheers,
Sebastian

juliusrainey August 31, 2017 at 4:21 pm

Wow! Okay so a few questions:

-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’m still learning.

Sebastian September 1, 2017 at 1:01 pm

Hey,

  1. 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.
  2. 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.
  3. 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.

I’ll update you on the homepage issue soon.

Cheers,
Sebastian

You must login or register to reply to this topic.