Fehler: slider Anpassung für mobile Version

Mike Sohlmann's Avatar

Mike Sohlmann

18 Mar, 2021 10:51 AM

Produkt: Tao Contao
Contao-Version: Version 4.9.9
Browser und Browserversionen: firefox

Hallo,
ich habe einen slider auf der Startseite https://www.za-joseph.de/ eingebunden, der so meinen Wünschen entspricht. In der mobilen Ansicht habe ich aber leider eine sehr kleine Fullscreen Ansicht ( mit viel weißem Rand um die Motive). ich muss ja damit leben, dass das Motiv beschnitten wird wenn es sich einpasst ( so wie auf den folgenden Seiten), aber ich finde die Einstellung nicht
danke für Support

  1. Support Staff 1 Posted by RockSolid Theme... on 18 Mar, 2021 12:57 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    In den Moduleinstellungen des Sliders können Sie unter „Skalierungsmodus“ den Wert „Beschneiden“ einstellen damit keine weißen Ränder mehr entstehen.

  2. 2 Posted by mike.sohlmann on 18 Mar, 2021 02:11 PM

    mike.sohlmann's Avatar

    Danke für info
    Kann man die Abbildung noch für die Mobilansicht beeinflussen? ( es ist jetzt sehr stark beschnitten, würde gern ein wenig mehr vom Motiv sehen)

  3. Support Staff 3 Posted by RockSolid Theme... on 18 Mar, 2021 04:22 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Anstatt der fixen Höhe können Sie in den Moduleinstellungen im Feld „Höhe“ z. B. 1280x650 einstellen. Dadurch bleibt das Seitenverhältnis des Sliders immer gleich.

    Alternativ können sie als Höhe den Wert css einstellen und folgenden CSS-Code in die Datei files/tao/css/custom.css einfügen:

    .mod_rocksolid_slider {
        height: 650px;
    }
    @media (max-width: 599px) {
        .mod_rocksolid_slider {
            height: 350px;
        }
    }
    
  4. 4 Posted by mike.sohlmann on 18 Mar, 2021 05:20 PM

    mike.sohlmann's Avatar

    Irgendwie klappt das nicht mit 1280x650 im Feld "Höhe" dann sehe ich nur einen kleinen Ausschnitt auf dem Handy
    Habe ich in den weiteren Einstellungen was falsch gemacht? S screen

  5. 5 Posted by mike.sohlmann on 18 Mar, 2021 06:18 PM

    mike.sohlmann's Avatar

    Ich bin es noch einmal:
    Ich würde gern bei allen header-Motiven auf den Seite https://www.za-joseph.de/ ( egal ob slider wie bei Start oder bei alle anderen Header Motiven ) das Bild im vollen Format sehen ( responsiv ) auf dem Handy oder Ipad.
    Müsste doch machbar sein oder?
    Danke für Support!

  6. 6 Posted by Mike Sohlmann on 19 Mar, 2021 06:09 AM

    Mike Sohlmann's Avatar

    Hallo,
    Frage zum slider Problem

    Wir herausgefunden woran es liegen könnte:
    Wir haben mobil die Navigation + Logo per CSS „oben fixiert“. Wenn man das wegnimmt, ist alles mit dem Slider okay.
    was müssen wir im folgenden Code ergänzen, damit beides geht?

    /* Mobil Navigation und Logo bleiben stehen */
    @media screen and (max-width: 599px) {
        .page-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
        }
        .main-navigation-mobile-open {
            position: fixed;
        }
    }

  7. Support Staff 7 Posted by RockSolid Theme... on 19 Mar, 2021 01:25 PM

    RockSolid Themes's Avatar

    Wie sich die Navigation im mobilen Viewport oben fixieren lässt ist in folgendem Beitrag beschrieben: https://help.rocksolidthemes.com/discussions/contao/15960

  8. 8 Posted by Mike Sohlmann on 19 Mar, 2021 02:17 PM

    Mike Sohlmann's Avatar

    Moin
    Fixieren war nicht die Frage ....bitte die Frage noch mal checken
    Danke

  9. Support Staff 9 Posted by RockSolid Theme... on 19 Mar, 2021 02:30 PM

    RockSolid Themes's Avatar

    was müssen wir im folgenden Code ergänzen, damit beides geht?

    Der erwähnte Code muss entfernt werden.

Reply to this discussion

Internal reply

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

Attaching KB article:

»

Already uploaded files

  • screen-mobil-headerbild.jpg 52.5 KB
  • screen-mobil-slider.jpg 31.9 KB

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