Artikelansicht - Reihenfolge Bild vs. Text für mobile Ansicht ändern

    Moin,

    bei der Vorlage Home Interior https://content.zeta-producer.com/layouts/top-re…rior/index.html werden die drei Rubriken "Kreativität, Engagement, Teamarbeit" optisch ansprechend im Wechsel Bild links/Text rechts und umgekehrt angeordnet.

    In der mobilen Ansicht leider folgerichtig wird bei "Engagement" zuerst der Text und dann das Bild angezeigt, somit dann im Übergang zu "Teamarbeit" zwei Bilder direkt hintereinander (siehe Fotos). Das verwirrt.

    Gibt es irgendwie eine Möglichkeit bis zu einer gewissen Bildschirmauflösung Text/Bild Ansicht zu verändern, so dass auch mobil immer zuerst die Bilder erscheinen und dann der Text? Geht sowas mittels CSS? Oder ein anderes Widget?

    danke & Gruß Tobias

    Hallo,

    leider hat Zeta Producer dazu keine eingebaute Funktion, aber das lässt sich mit etwas eigenem CSS erreichen.

    Bitte zu erst den folgenden Code kopieren (am Besten über das kleine Icon rechts oben) und unter Einstellungen > CSS einfügen:

    Code
    <style>
@media (max-width: 667px){
    .zpContainer.zpContainer--reverseMobile .zpRow:nth-child(2n) {
        flex-direction: column-reverse;
    }
}
</style>

    Dann den Container, der die Reihen mit den Bildern und Texten enthält, bearbeiten (s. https://docs.zeta-producer.com/container-bearbeiten.html#a5570) und bei "CSS-Klasse" folgendes einfügen:

    Code
    zpContainer--reverseMobile


    VG

    Freundliche Grüße
    Philipp

    ---------------------------------------------------------------
    Widgets für Zeta Producer: widget-zp.de

    Einmal editiert, zuletzt von phil-web (2. Oktober 2023 um 10:15)

    Hallo,

    das ist mein Fehler, sorry. Der Zahlenwert bei @media (max-width: 768px) muss 667px sein, dann sollte dieses Problem auf dem Tablet nicht mehr auftreten.

    VG

    Freundliche Grüße
    Philipp

    ---------------------------------------------------------------
    Widgets für Zeta Producer: widget-zp.de

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden