Impossible to customize CSS on French Mobile page

Hi @raphaelfiquet!

I tried to change the color of a paragraph on the mobile version of your site using the Developer Tools and media queries and it had the expected effect. If the changes can’t be seen on the published page, there may be a caching issue. You could check that by clearing the cache (browser and plugin, if you use any caching plugin) or by checking the site from another device.

I hope this helps!

Hi Lucia,

thank you for your answer.

Indeed, I haven’t specified that it works correctly on the Dev Tools. It doesn’t seems to be a caching issue, as I tried already clearing, and disabling the cache plugin. I tried both on iOS and Android devices, and it’s still dirty.

So it really seems like it’s coming from the theme.

Hello @raphaelfiquet!

I checked this on my test instance and I can’t replicate the issue, thus it may be occurring due to a plugin conflict on your end. Please install the Health Check & Troubleshooting plugin, enable the troubleshooting mode which will deactivate all plugins, reactivate WPML and check if the issue persists. If the problem doesn’t occur anymore, it means it was indeed caused by a plugin conflict and you should reactivate the plugins one by one, until you find the culprit. Then, replace that plugin with an alternative one. Also, you could backup your site, switch to a default theme like Twenty Twenty One and check if the issue persists.

Have a nice day!

Hi,

well, I don’t really get how you can’t replicate, as all of possible mobile instance are doing it on my end.

Here is the display of https://www.staging2.raphaelfiquet.com/ : https://snipboard.io/w3Qntu.jpg
And here the broken page https://www.staging2.raphaelfiquet.com/fr : https://snipboard.io/0bt9V8.jpg

I tried to use the troubleshooting plugin, without results. Indeed, with only Otter as plugin (which is essential with the theme), there are already differences. Switching to another theme doesn’t make any sense here for my tests either.

Please help me figure that out, as now I am stuck with this theme for my website, and I cannot use publicly my site at this point.

Hi @raphaelfiquet!

Did you also check by disabling Siteground? In some cases, optimization plugins like this one optimize CSS delivery, compress JavaScript files and minify HTML, which can lead to certain issues similar to this one.

Hi Lucia,

Yes, As I have tried the troubleshooting plugin, I by extension check disabling Siteground Optimizer (I suppose you referring to Optimizer).

I also tried to leave it on, but deactivate all the features, purge cache etc, not any improvements

This is therefore not the cause of it.

Hello @raphaelfiquet ,

Thank you for reaching out!

In some cases, the code within the Additional CSS tab might be broken at some level which makes code that is written after the break to become invalid.

We can test this theory by deleting all the code inside the Additional CSS tab (you can cut and paste it in another place like Notes so you don’t lose all your work) and then try applying a simple command such as the one below:

body {
display: none !important;
}

Try and publish the changes and see if the CSS is respected. If the answer is yes, then you need to reevaluate the previous code and see where the mistake is produced, and fix it.

Thank you for understanding and please let us know if this worked for you!