The media query does not work for this site out of a sudden and I have no idea where to figure out what is wrong.
Example for this page. https://villagecommoning.hku.hk/en/commoning/
‘.page-items’ is supposed to be having grid-template-columns: 1fr; So the grid items will be stack when it is under 768px. it is not working. But is working while the MT editor is opening.
https://ibb.co/xsg681T https://ibb.co/VMZHStX
It used to work. I am not sure if it is related to the server side as the hosting server is not well managed. But I don’t want where to debug.
If the styles apply in MT but not on the frontend, I suspect it’s due to some invalid CSS that is preventing all subsequent rules from being processed by the browser. This issue is explained in the invalid CSS section of the troubleshooting video.
I see that you’re minifying Microthemer’s CSS file, I recommend disabling that option while you troubleshoot this, just in case it compounds the issue.
To fix this, run through the errors on this CSS validator:
Parse Errors are the main ones to address – you can ignore warnings. The validator has some false positives with font-display and vendor prefixes but parse errors need to be fixed.
You can review your stylesheet and search for text with Ctrl + F, or it may be easiest to just search Microthemer using the folder search feature.
Let me know if that helps!
Cheers,
Sebastian
P.S. I noticed some issues with animation ending in “0.;” – do you think that’s just typos or could it be an issue with Microthemer’s UI?
This is brilliant. I have some clues what it may be the cause. So I review the code by myself.
It turns out it was caused by a variable calc() function.
I fixed it from
–story-top-padding: calc(var(–edge-padding-inline) * 5 );
to
–story-top-padding: calc(var(–edge-padding-inline) * 5);
The problem is resolved.
Thank you very much for the tool suggestion as well. It is new to me!
