Zur Navigation

Schriftgröße in Navigaion auf S4 und S7

1 krieger98

Hallo,
Wenn ich die Webseite https://www.fahrrad-workshop-sprockhoevel.de/mtb-trekkingrad-workshop-test.htm
auf dem Samsung S4 oder S 7 aufrufe und den Bildschirm drehe wird mir die Schriftgröße in der Navigation auf der linken Seite zu klein angezeigt. In der senkrechten Anzeige ist das Ok. Ich habe versucht in den @media (max-width: 840px), @media (max-width: 640px) und @media (max-width: 480px)
die Schriftgröße zu ändern was zu keinem Erfolg führte. Die CSS-Datei ist die
"responsive-test.css".
Was muss ich ändern ?

27.12.2017 16:35 | geändert: 27.12.2017 16:38

2 Jörg

Die Navigationslinks auf der linken Seite werden bei kleinerer Bildschirmbreite dem Firefox Inspektor zufolge durch folgenden Selektor angesprochen:

.nav-box a {
	font-size: 16px;
}

... und zwar in der Datei responsive-workshop1.css innerhalb von @media (max-width: 480px) { ... }

So eine Angabe sollte dann auch in einen entsprechenden Media-Query-Abschnitt für eine größere Bildschirmbreite.

27.12.2017 18:08

3 krieger98

Zitat von Jörg
Die Navigationslinks auf der linken Seite werden bei kleinerer Bildschirmbreite dem Firefox Inspektor zufolge durch folgenden Selektor angesprochen:

.nav-box a {
	font-size: 16px;
}

... und zwar in der Datei responsive-workshop1.css innerhalb von @media (max-width: 480px) { ... }

So eine Angabe sollte dann auch in einen entsprechenden Media-Query-Abschnitt für eine größere Bildschirmbreite.
Meist Du damit in den (max-width: 640px) und (max-width:840px)

27.12.2017 18:20

4 Jörg

Ja, bei welcher Breite du den Breakpoint halt setzen möchtest. (max-width:840px) beinhaltet automatisch auch (max-width: 640px). Du kannst auch einen neuen Media-Query-Block mit (max-width:720px) schreiben und die Definition darein packen. Am besten ganz ans Ende, dann überschreibt es ggf. andere vorhergehende Definitionen.

Die derzeitige Struktur der CSS-Datei kann ich nicht lesen, da diese komprimiert ist. Ich sehe nur, was mir der Inspektor von Firefox anzeigt.

27.12.2017 20:36 | geändert: 27.12.2017 20:40

5 krieger98

Ich habe die responsive-workshop1.css j etzt geändert diese kann man jetzt lesen. Habe am Ende der Datei folgendes eingefügt:
@media (max-width: 720px){
.nav-box a {
font-size: 16px;
}
Das hat aber nichts gebracht.

27.12.2017 23:04

6 Jörg

Hierzu fehlt anscheinend die schließende Klammer:

@media (max-width: 480px){

Firefox folgert daraus wohl, dass alles, was danach kommt nur gilt für eine Bildschirmbreite unterhalb von 480px, also auch der letzte von dir eingefügte Block. Ein Einrücken des Codes macht dies deutlich:

@media (max-width: 480px) {
    /* ... */
    @media (max-width: 720px) {
        .nav-box a {
            font-size: 16px;
        }
    }

Für den letzten Block müssen sowohl die äußere als auch die innere Bedingung erfüllt sein!

Ein Einfügen der fehlenden Klammer sorgt dafür, dass nur die Bedingung von max. 720px Bildschirmbreite gelten muss:

@media (max-width: 480px) {
    /* ... */
}
@media (max-width: 720px) {
    .nav-box a {
        font-size: 16px;
    }
}

28.12.2017 11:47

8 Jörg

Was genau hast du denn da geändert? das würde ich erstmal rückgängig machen.

Es muss nur die fehlende schließende Klammer "}" gesetzt werden, wo der @media Abschnitt (max-width: 480px) enden soll. Die schließende Klammer sollte spätestens gesetzt werden, bevor der nächste @media Abschnitt beginnt, also spätestens an dieser Stelle:

@media (max-width: 480px){
    /* ... Definitionen, die bei einer Bildschirmbreite bis 480px gelten ... */
} /* <- hier fehlende schliessende Klammer einfuegen */
@media only screen and (max-width: 300px){
    /* ... Definitionen, die bei einer Bildschirmbreite bis 300px gelten ... */
}
@media (max-width: 720px) {
    /* ... Definitionen, die bei einer Bildschirmbreite bis 720px gelten ... */
} 

29.12.2017 11:16 | geändert: 29.12.2017 11:21

9 Jörg

Noch ein Nachtrag:

Auf dem Destob wird der Inhalt nach unten verschoben und auf dem S4 stimmt das Format überhaupt nicht mehr.
Was sind die Ursache?

Die Datei responsive-workshop-test.css wird vom Webserver mit dem Content-Type text/html statt text/css ausgeliefert, deswegen wird das darin enthaltene CSS vom Browser wohl komplett ignoriert. Das Problem hatten wir hier schonmal behandelt:

https://joergs-forum.de/gzip-compression-nutzen-fuer-css-und-js-t-4605-3#p29

29.12.2017 12:05 | geändert: 29.12.2017 12:16

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]