Verwendung: Tagline in Tao auf volle Bildschirmhöhe anpassen

Andreas's Avatar

Andreas

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

    RockSolid Themes's Avatar

    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;
        }
    }
    
  2. 2 Posted by Andreas on 09 Oct, 2017 06:30 AM

    Andreas's Avatar

    Herzlichen Dank für die Information.

    Mit freundlichen Grüßen,
    Andreas

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

    christopher's Avatar

    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?

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

    RockSolid Themes's Avatar

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

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

    Christopher's Avatar

    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

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

    RockSolid Themes's Avatar

    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;
        }
    }
    
  7. 7 Posted by Christopher on 10 Oct, 2017 04:19 PM

    Christopher's Avatar

    Denkfehler, … jetzt funktioniert's!
    Herzlichen Dank!

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

    Andreas's Avatar

    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?

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

    RockSolid Themes's Avatar

    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
    

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