Verwendung: Animierte Überschrift Platzierung

Michi's Avatar

Michi

05 Jul, 2024 08:07 AM

Produkt: Oneo Contao
Contao-Version: 3.5.36
Browser und Browserversionen: Firefox und Chrome

Hallo
Ich wollte die Animierte Überschrift nicht zentriert sondern am unteren Rand des Slider-Bildes einfügen und zudem mit einem leicht transparenten Hintergrund hinterlegen.
Ich habe es über diese css Anpassung versucht:
.typing-headline h2 > .typing-headline-text, .typing-headline h3 > .typing-headline-text { position: absolute; top: 250px; left: 0; width: 100%; height: 100%; background-color: lightgreen; }

Ich habe hier das "Top" geändert und auch "Background-color" hinzugefügt. Grundsätzlich bring ich es so schon an den unteren Rand des Sliders, doch in der mobilen Version sieht das dann nicht mehr so gut aus.
Gibt es eine andere css Anpassung, die besser ist und dann auch auf allen Endgeräten funktioniert ?

Vielen Dank und Grüsse
Michi

  1. Support Staff 1 Posted by RockSolid Theme... on 05 Jul, 2024 01:58 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Ihre Frage betrifft eine individuelle Anpassung. In unseren Support-Richtlinien weisen wir darauf hin, dass wir leider keine Hilfe bei Umbauten leisten können. Dennoch versuchen wir Ihnen, in diesem Fall, im Rahmen unserer Möglichkeiten weiterzuhelfen:

    Gibt es eine andere css Anpassung, die besser ist und dann auch auf allen Endgeräten funktioniert ?

    Mit folgendem CSS-Code sollte sich der gewünschte Effekt realisieren lassen:

    @media (min-width: 1024px) {
        .main-slider .typing-headline {
            margin-top: max(0px, calc(100vh - 35em));
        }
    }
    .main-slider .typing-headline > :is(h1, h2, h3) {
        background-color: rgba(144, 238, 144, 0.8);
    }
    
  2. 2 Posted by Michi on 08 Jul, 2024 11:27 AM

    Michi's Avatar

    Vielen Dank, mit Eurem Vorschlag habe ich den transparenten Hintergrund bekommen, doch leider ist die animierte Schrift nicht am unteren Rand des Sliders... Muss ich da noch was anpassen ?
    https://fussballcamp.svruemlang.ch/index.php/home.html

    Vielen Dank und Grüsse

  3. Support Staff 3 Posted by RockSolid Theme... on 09 Jul, 2024 11:43 AM

    RockSolid Themes's Avatar

    In unserem Test befand sich die animierte Überschrift im unteren Bereich des Sliders, siehe Screenshot anbei.

    Die genaue Position können Sie durch Veränderung des Werts 35em einstellen.

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