Schriftgröße in Navigaion auf S4 und S7

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.

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.

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;
    }
}

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 ... */
}