Problem

Betrachtet man eine Website, die mit GRAV und einem unveränderten Quark-Theme erstellt wurde, auf einem mobilen Gerät, wird die Schrift sehr klein dargestellt. Wie kann die Schrift für die Anzeige auf mobilen Geräte vergrössert werden?

Lösung

Derartige Layoutanpassungen können über CSS vorgenommen werden. Bereits in der Grundinstallation steht eine CSS-Datei zur Verfügung, die für solche Anpassungen vorgesehen ist (custom.css). Wie an anderer Stelle erwähnt, ist es empfehlenswert, mit einem Child-Theme zu arbeiten.

Vorgehensweise für Installationen ohne Child-Theme

1. Die Datei grav/user/themes/quark/css/custom.css öffnen

2. Folgenden Code eingeben:
   

   @media (max-width: 768pxpx) {
   p,a,li,th,td {
         font-size: calc(16px + 4 * ((100vw - 480px)/ 800));
     }
   
   .treemenu li a {
       font-size: calc(16px + 4 * ((100vw - 480px)/ 800));
     }
   }

3. Datei speichern
4. Webseite neu laden (manchmal werden CSS-Änderungen nicht auf Anhieb wirksam -> Cache leeren, Browser neu laden, custom.css im Browser laden)

Vorgehensweise für Installationen mit Child-Theme

1. Im Ordner_grav/user/themes/quark_child/ einen Ordner namens css erzeugen
2. Die Datei grav/user/themes/quark/css/custom.css in den Ordner _grav/user/themes/quarkchild/css kopieren
3. Die Datei _grav/user/themes/quarkchild/css/custom.css öffnen

4. Folgenden Code eingeben:
   

   @media (max-width: 768pxpx) {
   p,a,li,th,td {
         font-size: calc(16px + 4 * ((100vw - 480px)/ 800));
     }
   
   .treemenu li a {
       font-size: calc(16px + 4 * ((100vw - 480px)/ 800));
     }
   }

5. Datei speichern
6. Webseite neu laden (manchmal werden CSS-Änderungen nicht auf Anhieb wirksam -> Cache leeren, Browser neu laden, custom.css im Browser laden)

Resultat

• Fliesstext, Listen-Einträge sowie Text in Tabellen sollten nun auf mobilen Geräten leicht vergrössert dargestellt werden
• Überschriften wurden von dieser Anpassung bewusst ausgeklammert, da sie sonst auf kleinen Bildschirmen unverhältnismässig gross dargestellt worden wären.

Quelle