Guten Tag! Kurze Warnung an dieser Stelle vor einer fiesen Compiler-Falle im Gambio GX5 / 26, die mich heute Stunden der Fehlersuche gekostet hat. Das Fehlerbild: Euer CSS verhält sich plötzlich komplett irrational. Bestimmte Regeln greifen nur noch auf dem Desktop, verschwinden auf dem Handy völlig, oder tauchen plötzlich gar nicht mehr auf. Testet ihr den Code live in den DevTools (F12), funktioniert er aber einwandfrei. Die Ursache: Der interne Gambio-Compiler, der die main.min.css generiert, kommt mit verschachtelten At-Regeln nicht klar (z. B. @keyframes innerhalb von @media oder @media in @media). Obwohl das nach modernen Webstandards sauberes CSS ist, verschluckt sich Gambio daran und "verliert" beim Kompilieren die schliessende Klammer }. Die Folge: Der umschliessende Block bleibt für den Rest der Datei sperrangelweit offen! Alle CSS-Dateien, die der Shop danach noch lädt, rutschen ungewollt in diesen offenen Block. Bleibt ein @media (min-width: 768px) offen, wird euer komplettes nachfolgendes CSS auf Handys ignoriert. Bleibt ein @media print offen, verschwindet euer nachfolgendes CSS komplett von allen Bildschirmen. Die Lösung: At-Regeln für Gambio immer zwingend flach halten. Zieht @keyframes und andere @media-Queries immer komplett auf die oberste Ebene (Top-Level) heraus. @gambio Es wäre wirklich an der Zeit, den internen CSS-Compiler mal auf einen aktuellen Stand zu bringen, damit er moderne und völlig standardkonforme CSS-Verschachtelungen fehlerfrei verdaut. Beispiel: Code: @media (min-width: 768px) { .mein-banner { animation: slidedown 1s; } /* HIER KNALLT ES: Keyframes niemals in Media-Queries verschachteln! */ @keyframes slidedown { from { opacity: 0; } to { opacity: 1; } } } Korrektur des Codes damit es geht: Code: @media (min-width: 768px) { .mein-banner { animation: slidedown 1s; } } /* Keyframes sauber ausgelagert (Top-Level): */ @keyframes slidedown { from { opacity: 0; } to { opacity: 1; } }