Home → Contao →

Verwendung: Tao Template für Ansicht auf Mobilen Endgeräten

• Edit

Lena-Marie Groß

31 Aug, 2023 09:49 AM

Produkt: Tao Contao
Contao-Version: 4.13.16

Wir sind auf der Suche nach einer Tao Erweiterung die es uns ermöglicht, bereits bestehende Seiten für Mobile Nutzer anzupassen.

Unser Problem ist, dass Anpassungen innerhalb von Contao (z.B. Abstand nach /vor) meist nur für die Ansicht am Desktop ODER für die Mobile Ansicht eingestellt werden können. Die Anpassungen sehen dann meist nur auf dem Desktop oder in der Mobilen Ansicht gut aus, jedoch leider nicht bei allen Ansichten (was sie im Idealfall mit einer Einstellung sollten) :)

Zusammenfassend gibt es also keine Möglichkeit, unsere Webseite responsive zu gestalten. Könnt ihr uns weiterhelfen?

1. Support Staff 1 Posted by RockSolid Theme... on 31 Aug, 2023 12:00 PM

   

   Vielen Dank für Ihre Frage.

   Sie können den gewünschten Elementen eine CSS-Klasse zuweisen und via CSS-Code die unterschiedliche Darstellung je Bildschirmgröße steuern.

   Z. B. mit einer CSS-Klasse margin-bottom-large und folgendem CSS-Code in der Datei files/tao/css/custom.css

   .margin-bottom-large {
       margin-bottom: 100px !important;
   }
   @media screen and (max-width: 599px) {
       .margin-bottom-large {
           margin-bottom: 50px !important;
       }
   }
   

   Dadurch wird am Desktop ein horizontaler Abstand von 100 Pixel und auf Mobile 50 Pixel erzeugt.

   • Edit

2. 2 Posted by L Groß on 31 Aug, 2023 12:53 PM

   

   Gibt es hier auch eine einfachere Möglichkeit (Plug-In etc.?
   Wir verstehen es nun so, dass wir es nun für jedes einzelne Element im CSS anpassen müssten.

   • Edit

3. Support Staff 3 Posted by RockSolid Theme... on 04 Sep, 2023 09:56 AM

   

   In der aktuellen Version des Tao-Themes sind bereits einige solcher Klassen enthalten wie z. B. margin-top-xl oder margin-bottom-s (von xxs bis xxl).
   In der mobilen Ansicht werden diese Abstände jeweils halbiert. Sie verwenden anscheinend jedoch eine ältere Version des Themes in welcher diese Klassen noch nicht vorhanden waren.

   Wir verstehen es nun so, dass wir es nun für jedes einzelne Element im CSS anpassen müssten.

   Das hängt davon ab, was genau Sie an der Darstellung verändern möchten. Sie können jedenfalls dieselbe CSS-Klasse für mehrere Elemente einsetzen, oder auch die bestehende CSS-Klasse des Elements verwenden wenn die Anpassung alle Vorkommen des Elements betreffen soll. Weitere Informationen dazu finden Sie auch in unserem Anpassung-Tutorial: https://rocksolidthemes.com/de/contao/support/tutorials/elemente-anpassen-3

   • Edit