Mobile: Bild immer ÜBER den Text? Wie geht das?

axelwestdoerp

Hallo, ich versuche es mal zu erklären.
Ich präsentiere im Bereich DESKTOP ein Bild LINKS und rechts daneben den Text.
In der nächsten Reihe mache ich es anders herum, Text links und rechts das Bild.
Soll etwas "lockerer" aussehen.

Im MOBILE wird s dann aber anders dargestellt, wenn auch nachvollziehbar.
Aus Reihe 1: Bild oben, Text drunter.
Aus Reihe 2: Text oben, Bild drunter.

Das kann aber auch verwirren. Was muss ich machen, damit das Bild einer Reihe stets OBEN ist
und der dazu gehörige Text stets drunter?

Eigentlich ist es nachvollziehbar, dass immer der linke Bereich oben steht, durch Spaltentrennung.
Aber in der Mobil - Darstellung wäre es sinnvoller, denke ich, dass Bild stets voran gestellt wird.

Beispiel: http://www.fotow.de 4. und 5. Reihe: (testweise so eingestellt: Fotogeschenke: Bild links,
nächste Reihe: Fotofilme: Bild rechts damit man es mal mobile nachvollziehen kann, was ich schreibe.

Gruss
Axel

phil-web

Hallo Axel,

schau mal hier, da hatte ich eine Lösung dafür gezeigt: RE: Artikelansicht - Reihenfolge Bild vs. Text für mobile Ansicht ändern

Steffen T.

Hallo,

da müssen Sie folgendermaßen vorgehen:

Über die Darstellungs-Optionen der Reihe, wo das Bild rechts ist, eine Klasse vergeben.
Zum Beispiel: rowImgRight
Siehe auch: https://docs.zeta-producer.com/reihen-bearbeiten.html
Eigenes CSS eingeben.
Siehe auch: https://docs.zeta-producer.com/eigenes-css-einfuegen.html

Code

@media (max-width: 479px) {
    .rowImgRight {
        flex-direction: column-reverse;
    }
}

axelwestdoerp

Dankeschön, Steffen T. und phil-web
Haut super hin.

Mobile: Bild immer ÜBER den Text? Wie geht das?

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?