Home → Contao →

Verwendung: Elemente in Abhängigkeit von Bildschirmgröße anzeigen

• Edit

Jens Reichel

12 Jan, 2021 05:02 PM

Produkt: Tao Contao
Contao-Version: 4.10.5

Liebes RockSolid-Supportteam,

auf großen Bildschirmen hat eine Tagline mit einem die ganze Breite ausfüllenden Foto einen Wow-Effekt. Auf einem Handy sieht dieselbe Seite hingegen unschön aus, weil das Foto entweder verzerrt oder beschnitten dargestellt werden muss. Hier wäre die Einbindung als "normales" Foto schicker.

Besteht die Möglichkeit, das Inhaltselement "Zentrierter Bereich Anfang" um eine Art IF-Abfrage zu ergänzen, mit dem es nur auf Bildschirmen ab Tablet-Größe angezeigt wird?

Und des Weiteren ein Inhaltselement "Bild" so zu konfigurieren, dass es nur auf Handys angezeigt wird?

Vielen Dank!

1. Support Staff 1 Posted by RockSolid Theme... on 13 Jan, 2021 10:03 AM

   

   Vielen Dank für Ihre Frage.

   Sie können folgenden CSS-Code zur Datei files/tao/css/custom.css hinzufügen:

   @media (max-width: 599px) {
       .hide-on-mobile {
           display: none !important;
       }
   }
   @media (min-width: 600px) {
       .show-on-mobile {
           display: none !important;
       }
   }
   

   Danach können Sie über die CSS-Klasse hide-on-mobile Elemente im mobilen Viewport ausblenden lassen und über die CSS-Klasse show-on-mobile Elemente nur im mobilen Viewport anzeigen lassen. Diese Klassen können Sie über das Contao-Backend bei beliebigen Elementen und Modulen einstellen.

   • Edit

2. 2 Posted by Jens Reichel - ... on 13 Jan, 2021 10:27 AM

   

   Fantastisch - tausend Dank!

   • Edit