Anmelden

Archiv verlassen und diese Seite im Standarddesign anzeigen : css media query funktioniert nur offline



rstuby
28-01-2020, 18:11
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:
@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!

rstuby
28-01-2020, 18:16
Sorry, das Problem hat sich gerade von selbst gelöst und ich habe keine Ahnung wieso. Ich habe nur die beiden @media-Blocks miteinander vertauscht, also den mit pointer:coarse nach unten. Kann es daran gelegen haben?

Helenawe
06-10-2020, 23:11
Nein

Wenn Sie den Block ändern

Problem ist nicht gelöst

es ist gut, dass alles funktioniert hat.

rstuby
02-03-2021, 12:59
Besser spät als nie: Der Browser behält die CSS-Dateien im Cache. Der Cache muss geleert werden, damit die neue Datei sofort wirkt.