Instead of
h2 { font-size: 22px; }
try
h2 { font-size: 22px !important; }
According to my browser this should fix your issue.
That did the trick.
Thank you so much, Patrick!
Glad I could help. Without the “!important” other CSS, related to h2, had precedence over your custom code.
Please go ahead and mark this topic as resolved.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Please don’t use “!important” styles that govern how text is displayed.
People with poor vision have the ability to upload their own stylesheet and override the current website’s styles.
http://www.washington.edu/accessit/articles?1142
If the website has “!important” and/or inline styles then they become a lot harder to override, which means these user stylesheets cannot work properly.
You don’t have to use “!important” styles, just use more specific CSS selectors.
The real issue here is that you’re editing the stylesheets directly. Are you aware that modifying the theme’s files like this will lead to those modifications being erased when the theme updates?
If you’re just wanting to make CSS changes then do so in a Custom CSS plugin. In fact in that Custom CSS plugin, in the case of styling your “h2” element you don’t even need to use more specific CSS styles. Just put the CSS you tried before into its section of the dashboard:
h2 { font-size: 22px; }
The Custom CSS plugin is called after you load your stylesheet, so it takes precedence over your original styles.
Thanks for that info, Andrew. I installed the CSS plugin you recommended and changed the h2 code through that. The sub-headings are the right size now, as they were after I applied the “important” code, but now they’re update friendly.
