Home → Contao →

Fehler: slider Anpassung für mobile Version

• Edit

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

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

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

   

   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.

   • Edit

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

   

   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)

   • Edit

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

   

   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;
       }
   }
   

   • Edit

4. 4 Posted by mike.sohlmann on 18 Mar, 2021 05:20 PM

   

   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

   • screen-slider-2.JPG 118 KB
   • Edit

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

   

   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!

   • Edit

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

   

   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;
       }
   }

   • Edit

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

   

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

   • Edit

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

   

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

   • Edit

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

   

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

   Der erwähnte Code muss entfernt werden.

   • Edit

10. 10 Posted by mike.sohlmann on 08 Aug, 2024 03:10 PM

    

    This comment was split into a new discussion: ONEO: install an Instagram logo

    -

    • Edit