Vorlage:Infobar/style.css: Unterschied zwischen den Versionen

Vorlage:Infobar/style.css (Quelltext anzeigen)

Version vom 3. April 2024, 14:07 Uhr

319 Bytes hinzugefügt , 3 April

Test

RaWen

Oberflächenadministratoren, Administratoren

20.745

Bearbeitungen

@@ Zeile 83: / Zeile 83: @@
 /* Media Query für Bildschirme kleiner als 440px */
 @media (max-width: 440px) {
-     .infobar-text {
+     .infobar {
-         overflow-x: auto; /* Ermöglicht horizontales Scrollen für den Textbereich */
+         overflow-x: auto; /* Ermöglicht horizontales Scrollen für den gesamten Infobar-Container */
-         white-space: nowrap; /* Verhindert Umbrüche im Text, um das Scrollen zu unterstützen */
+        display: inline-flex; /* Ändert das Display zu inline-flex, um die natürliche Breite des Inhalts zu nutzen */
+         flex-wrap: nowrap; /* Verhindert das Umbruchverhalten, um eine horizontale Scrollbar zu erzwingen */
+        width: auto; /* Ermöglicht, dass die Breite des Containers seinen Inhalten entspricht */
+        gap: 10px; /* Anpassung des Gaps für eine kompaktere Darstellung */
+    }
+    .infobar > * {
+        flex: 0 0 auto; /* Stellt sicher, dass die Kinder des Infobar-Containers nicht gestreckt werden */
+        white-space: nowrap; /* Verhindert Textumbrüche bei Titeln oder anderen Inhalts-Elementen */
      }
-     .infobar-text .item, .infobar-text .boxless {
+     .infobar-icon, .infobar-img {
-         display: inline-block; /* Elemente nebeneinander halten, um das Scrollen zu ermöglichen */
+         flex-shrink: 0; /* Verhindert, dass Icons und Bilder schrumpfen */
-        white-space: normal; /* Stellt sicher, dass Text in .item und .boxless umgebrochen werden kann */
      }
-    /* Optional: Anpassung der Größe des Icons und des Bildes für kleinere Bildschirme */
+     .infobar-text {
-     .infobar-icon, .infobar-img img {
+         flex-grow: 1; /* Erlaubt dem Textbereich, verfügbaren Raum zu nutzen, ohne dass ein Umbruch erzwungen wird */
-         max-width: 40px; /* Verkleinert Icons und Bilder leicht */
-        max-height: 40px;
      }
 }