Hallo! Ich glaube, dies ist mein erstes Posting hier außerhalb des LaTeX-Forums.

Ich arbeite gerade an meiner Homepage ruth.stubenitzky-goettingen.de und bekomme die Mobilversion nicht zum Laufen.
Die css-Datei habe ich um einen Block mit folgendem Inhalt ergänzt:
Code:
@media (pointer: coarse) {
  ul#navi li {
    font-size: 1.5em; padding: 0.5em 0.2em 0.5em 0.2em; 
  } 
  ul#navi2 li {
    font-size: 1.5em; padding: 0.5em 0.2em 0.5em 0.2em; 
  } 
}

@media (max-width: 55em) {
  ul#navi {	
    float:none; display:flex; flex-direction:row; flex-wrap:wrap; width:100%; margin-top:.5em
  }
  ul#navi li {
    font-size: 1.2em; padding: 0.2em; 
  } 
  ul#navi2 {	
    float:none;  display: flex; flex-direction: row; width:100%; margin-top:.5em
  }
  ul#navi2 li {
    font-size: 1.2em; padding: 0.2em;
  } 
  div#inhalt { margin:0 2% 0 2%;  
  }  
}
Das mit dem Zeigegerät kann ich ohne Mobilgerät nicht ausprobieren, aber wenn ich die Seiten aus meinem lokalen Ordner aufrufe, kann ich den Browser zusammenschieben und ab einer bestimmten Breite sind dann die Menüs oben und mit größerer Schrift. Ich habe die neue css hochgeladen, trotzdem tritt online nicht der gleiche Effekt ein. Auch Freunde mit einem Smartphone sagen mir, dass sie die Menüs seitlich sehen.
Ich sehe den letzten Block nicht einmal, wenn ich online http://ruth.stubenitzky-goettingen.de/css/ruth1.css aufrufe. Wenn ich aber die Liste der hochgeladenen Files kontrolliere, ist dort dir richtige css-Datei vorhanden. Was mache ich falsch? Ich bin Anfängerin mit css und auch den html-Code habe ich größtenteils übernommen und mit anderen Texten und Bildern versehen.
Vielen Dank für jede Antwort!