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

Jens Reichel's Avatar

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

    RockSolid Themes's Avatar

    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.

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

    Jens Reichel - DistincTravel's Avatar

    Fantastisch - tausend Dank!

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac