Found:
The problem is into the @media ( width<= ....px )
QT and Firefox don't support a > or < or = ... after width ( : expected after width or heigh)
I did several tests and each time I use the specific @media (query) codding from into template-min.css, it failes.
Using older codding works.
If possible, can all:
@media (width <= ..... ) be replaced by @media (max-width: .....)
@media (width >= ..... ) be replaced by @media (min-width: .....)
Example of code you can test (create a html file and open it under QT browser or Firefox):
<!DOCTYPE html>
<html>
<style>
body {
background-color: linen;
}
@media (min-width: 600px) {
body {
background-color: coral;
}
}
@media (width >= 1000px) {
body {
background-color: red;
}
}
@media (max-width: 300px) {
body {
background-color: red;
}
}
</style>
<h1>The Window Object</h1>
<h2>The innerWidth and innerHeight Properties</h2>
<p id="demo"></p>
<script>
let w = window.innerWidth;
let h = window.innerHeight;
document.getElementById("demo").innerHTML = "Width: " + w + "<br>Height: " + h;
</script>
</body>
</html>
Open the html into the browser and change the browser wide.
You will get like me (I hope)

:
coral color when above or equal 600px
red never occurs when above or equal 1000px ( ignored, no effect )
red color when below or equal 300px
Or:
Could some code be added or updated into QT webengine to translate width >= into min-width: and width <= into max-width: for better compatibility with newer CSS code ?