Public Discussions > General Discussion
OS2World Site Update
Remy:
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):
--- Code: ---
<!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>
--- End code ---
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 ?
Remy:
--- Quote from: Martin Iturbide on March 25, 2025, 01:55:32 pm ---Hello
Someone at the Joomla forum gave me hint, but still do know if that can be.
With the firefox inspector (on Windows) if I disable "<div class="site-grid">" I get the similar issue on Firefox for Windows. He told me that it is possible that the other browsers does not implement "<div class="site-grid">" correctly but I'm still not sure about it.
Regards
--- End quote ---
I updated template.css for a try only (the not compressed css file)
replaced all occurences of width >= or width <=
Martin Iturbide:
Hello Remy
I think you found it.
Joomla let me create a "child" of the template that overrides the father, so I quickly put your template.css (I can also revert it very fast if there is some problem) and I think it worked. You are a genius :)
It works fine on Dooble Qt5, but not our old Firefox. But it is very good, it is a step forward.
Everybody, please test the site further, visit the pages and let me know.
Regards
Remy:
--- Quote from: Martin Iturbide on March 26, 2025, 01:42:09 pm ---Hello Remy
I think you found it.
Joomla let me create a "child" of the template that overrides the father, so I quickly put your template.css (I can also revert it very fast if there is some problem) and I think it worked. You are a genius :)
It works fine on Dooble Qt5, but not our old Firefox. But it is very good, it is a step forward.
Everybody, please test the site further, visit the pages and let me know.
Regards
--- End quote ---
Hi Martin,
As I wrote it, Firefox doesn't support grid gap etc... firefox, too old yet but it should fallback to flexbox as I can see it.
I just found having left a "height <=" on a @media entry. I would suggest you to replace all occurances of
"height <=" to "max-height:" and "height >=" to "min-height:" too.
(the second case seems not to exist but, it is easy to do a replace all)
Navigation
[0] Message Index
[*] Previous page
Go to full version