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!
-
I checked the site using the browser inspector as you suggested, and I can indeed see some of my custom CSS rules being crossed out, so it looks like certain theme styles are overriding them. I’ll try increasing selector specificity and selectively using !important where necessary to see if that stabilizes the styling across pages. I do not know if this happening only on my end, can you please check my site https://examtopicsdumps.com/ and tell me if this is happening on your end too?
The point about theme differences also makes sense. I’m currently using a theme with quite a few built-in style rules, so that may explain why some changes apply inconsistently while others don’t appear at all. I’ll also clear both browser cache and the WordPress cache again after making adjustments to rule out cached styles being served.
-
Hi,
Yes, I can confirm I see the same misalignment on my end too, so it’s definitely not just you!
Your troubleshooting plan sounds solid, increasing specificity and using!importantwhere needed, combined with clearing both browser and WordPress.com cache after making changes, should help stabilize things.
Let me know how it goes!
- The topic ‘Custom CSS Changes Not Applying Correctly on WordPress.com Site After Update’ is closed to new replies.