Media Query Not working out of suddent

Author Posts

1101blueli December 15, 2022 at 4:22 am

Hello.

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.

Any advice would be appreciated. Thanks


Sebastian December 15, 2022 at 12:30 pm

Hey Blue,

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:

https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fvillagecommoning.hku.hk%2Fwp-content%2Fmicro-themes%2Factive-styles.css%3Fmts%3D10235%26ver%3D6.0.3&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en

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?

1101blueli December 15, 2022 at 3:51 pm

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!

Sebastian December 15, 2022 at 4:06 pm

You’re welcome 🙂

And well done for resolving the errors!

You must login or register to reply to this topic.