Der Schrift in der mobilen Version ist viel zu klein

Der Schrift in der mobilen Version ist viel zu klein

Wir haben in Templates eine responsive Schriftgröße eingeführt, d.h. man kann die Schriftgröße individuell je nach Geräteklasse einstellen. Dabei wird zwischen drei Geräteklassen unterschieden:
  1. XS - Smartphones
  2. SM - Tablets
  3. LG - Desktop

So kannst du die Schriftgröße in der mobilen Version einstellen

  1. Gehe in den Theme Editor und wählen das Theme " MyClean " aus.
  2. Klicke auf " _variables.scss " und suche dort nach $font-size-xs.
  3. Ändere die Schriftgröße z.B. auf "13px" statt "11px".
  4. Speichere die Datei ab. Den blauen Button unten klicken.
  5. Kompiliere das Theme neu. Den grünen Button oben klicken.
Sollte die Variable  $font-size-xs nicht vorhanden sein, füge sie selbst ein.

Wie folgt einfügen:
  1. $font-size-xs:                      rem(13px);

Was bewirkt genau diese Einstellung?

Mit dieser Einstellung wird nicht nur die Schriftgröße geändert, sondern auch alle Symbole und dazugehörige Elemente. 

    • Related Articles

    • Logo zentrieren in der mobilen Ansicht

      Um dein Shoplogo im Header in der mobilen Ansicht mittig zu platzieren, füge diesen CSS-Code in deine < bootstrap.css> unter /templates/FlatChild/themes/DEIN-THEME/ ein: @media (max-width: 480px) { #logo a img { display: block; margin-left: auto; ...

    • Größe des Shoplogos einstellbar

      Du hast die Möglichkeit im Template die Größe deines Shoplogos individuell einzustellen.Nutze diese Einstellung, wenn dein Logo im Shop zu klein angezeigt wird. Beachte jedoch beim Hochladen des Logos, dieses muss in der Auflösung nicht größer als ...

    • Topbar in der mobilen-Version anzeigen lassen

      Nachfolgend eine Anleitung, wie man im Template in der mobilen Version die Topbar bzw. den Topbar-Hinweis anzeigen lassen kann.  Eine neue Header-Vorlage anlegen Erstelle im Child-Template eine neue Vorlage namens "header.tpl" mit folgendem Inhalt. ...

    • Allgemeine Fragen zu den JTL-Shop Templates

      Es fehlt mir eine wichtige Funktion, können Sie diese programmieren? Ja, bitte nimm mit uns Kontakt auf und beschreibe die Funktionsweise möglichst genau. Wir unterbreiten dir gerne ein Angebot und machen alternative Vorschläge.  Wie kann ich die ...

    • Hinweis in der Topbar einfügen oder bearbeiten

      In der Topbar ist es möglich zwischen dem Google Translator und den Links einen individuellen Hinweis anzuzeigen. Hinweis einfügen / bearbeiten Der Hinweis im JTL-Shop 5 ist standardmäßig nicht belegt und kann über die Sprachverwaltung eingefügt ...