Home → Contao →

Verwendung: Tagline in Tao auf volle Bildschirmhöhe anpassen

• Edit

Andreas Steinkellner

06 Oct, 2017 09:33 AM

Produkt: Tao Contao
Contao-Version: 4.4.6
Browser und Browserversionen: FF 56

Hallo,
wie kann ich das Tagline in Tao auf volle Bildschirmhöhe anpassen, so dass sich die Höhe meines Slides an den jeweiligen Bildschirm anpasst. Die breite habe ich, aber die Höhe bekomme ich nicht hin.

1. Support Staff 1 Posted by RockSolid Theme... on 06 Oct, 2017 04:03 PM

   

   Vielen Dank für Ihre Frage.

   Um den Slider an der Höhe des Browserfensters auszurichten können Sie folgenden CSS-Code in die Datei files/tao/css/custom.css einfügen:

   .main-slider {
       height: calc(100vh - 122px);
   }
   @media screen and (max-width: 599px) {
       .main-slider {
           height: auto;
       }
   }
   

   • Edit

2. 2 Posted by Andreas Steinke... on 09 Oct, 2017 06:30 AM

   

   Herzlichen Dank für die Information.

   Mit freundlichen Grüßen,
   Andreas

   • Edit

3. 3 Posted by christopher on 09 Oct, 2017 06:44 PM

   

   Hallo,
   ich möchte mich diesem Thema mit einer Frage anschließen.
   Meine Tagline besteht aus: Slider - Zentrierter Bereich Anfang - Boxen - Zentrierter Bereich Ende.
   Ich hätte nun gerne dass sich meine gesamte Tagline an die Bildschirmhöhe anpasst.
   Dies funktioniert bei Vollbild auch einwandfrei wenn ich diese CSS-Eigenschaften dem Elternelement gebe.
   Sobald man allerdings das Browser-Fenster kleiner macht oder zoomt, verschwinden die Boxen oder es sind nur noch Teile davon zu sehen.
   Wie kann ich das lösen?

   • slider_mit_boxen.jpg 350 KB
   • Edit

4. Support Staff 4 Posted by RockSolid Theme... on 10 Oct, 2017 09:11 AM

   

   Damit wir Ihnen zielgerichteter weiterhelfen können, schicken Sie uns bitte einen Link zur betroffenen Seite.

   • Edit

5. 5 Posted by Christopher on 10 Oct, 2017 11:31 AM

   

   Hallo und danke für die schnelle Rückmeldung,
   meine Seite befindet sich zur Zeit noch im Wartungsmodus.

   Ich habe es hier reproduziert:
   [link entfernt]
   … den Link bitte anschließend wieder entfernen.

   Danke

   • Edit

6. Support Staff 6 Posted by RockSolid Theme... on 10 Oct, 2017 03:01 PM

   

   Der Slider auf Ihrer Seite hat nach wie vor eine fixierte Höhe von 600 Pixel. Versuchen Sie es bitte mit folgendem CSS-Code:

   .main-slider {
       height: calc(100vh - 300px);
   }
   @media screen and (max-width: 599px) {
       .main-slider {
           height: auto;
       }
   }
   

   • Edit

7. 7 Posted by Christopher on 10 Oct, 2017 04:19 PM

   

   Denkfehler, … jetzt funktioniert's!
   Herzlichen Dank!

   • Edit

8. 8 Posted by Andreas Steinke... on 16 Oct, 2017 08:12 AM

   

   Eines hätte ich noch. Wenn man hier die Höhe ändert, ist der Parallax-Effekt weg. Gibt's noch ne Möglichkeit, dass auch weiterhin dieser Effekt bleibt?

   • Edit

9. Support Staff 9 Posted by RockSolid Theme... on 16 Oct, 2017 09:50 AM

   

   Bearbeiten Sie dafür bitte die Datei files/tao/js/script.js und ersetzen Sie diese Zeile:

   && taglineHeight + originalHeight < documentHeight
   

   mit folgendem Code:

   && taglineHeight + originalHeight < documentHeight + 100
   

   • Edit

10. 10 Posted by Leon on 01 Aug, 2024 10:43 AM

    

    This comment was split into a new discussion: Tao: Tagline auf volle Bildschirmhöhe anpassen

    -

    • Edit