Custom CSS Changes Not Applying Correctly on WordPress.com Site After Update
-
Hi everyone,
I’m having an issue with custom CSS on my WordPress website. I recently made changes to my site’s design using the built-in “Additional CSS” editor, but the updates are not being applied correctly on the front end.
Problem details:
I added custom CSS to adjust layout spacing, fonts, and header styling.
After saving the changes, some styles appear, but others are either ignored or overridden.
In some cases, the browser still shows the old styling even after clearing cache.
The issue seems inconsistent across different pages and devices.Any guidance would be appreciated. Thanks!
-
Hi there,
I understand it could be frustrating when some changes are visible and others just don’t show, that could be because a few common causes related to CSS priority, you can check them by using F12 in your browser to see the full HTML of your site and look for crossed-out styles — those are being overridden by another rule:- If a style is using “!important” and you are trying to made a change related to that style, the !important rule takes priority, in this case you just have to use “!important” in your style too.
- When a style is more specific and yours are more general, the specific one will remain, you just have to specify the block that you want change too to correct that. For example, instead of:
“p { font-size: 20px; }"
try:
“.wp-block-post-content p { font-size: 20px; }"
to be more specific. - Also sometimes cleaning both your cache browser and your WordPress.com site cache can solve all problems and make the changes done.
- At last, the site theme you are using could be the reason, classic themes may have more specific CSS rules that are harder to override, block themes like Twenty Twenty-Four should be more permissive.
Hope this helps, let me know if you have any question!
WordPress.com Forums 