Public Discussions > General Discussion

OS2World Site Update

<< < (6/6)

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