Mobile Ansicht Bildposition verändern

  • Hallo,

    ich habe ein kleines Problem. Bei meinem Online Shop wird in der mobilen Ansicht die Bilder in einer falschen Reihenfolge dargestellt. Das stört mich vor allem im Blog-Menü, da ich dort jeweils ein Bild links und recht habe und dann zentriert einen Text drunter geschrieben habe (nicht als Bildunterschrift, sondern als neues Textfeld, da ich einen Hyperlink einfügen wollte etc. und das mit der Unterschrift nicht möglich war). Das wird in der mobilen Ansicht jetzt ganz vogelwild dargestellt und der Text passt nicht mehr zum Bild. Aber auch generell bei Einträgen wird es immer total unschön dargestellt, sobald ich Bilder links oder rechts neben einen Text gepackt habe, weil er dann alles anfängt zu verschieben. Gibt es dafür eine Lösung?

    Das wäre der Link zu meinem Shop und dem, für mich, am problematischsten Blog:
    Blog (meinhofladen.shop)

    Liebe Grüße

    Lisa-Marie Simon

  • Hallo,

    in der mobilen Darstellung werden Spalten, die auf dem Desktop nebeneinander dargestellt werden, ggf. untereinander Dargestellt.

    Die Texte zu den Bildern haben Sie allerdings in einer neuen Reihe erfasst, und daher werden die Texte jeweils erst nach 2 Bildern dargestellt (Bilder sind in der selben Reihe und texte in einer anderen Reihe). Lösung ist, die Texte in der selben Reihe unter dem Bild zu platzieren, statt in einer neuen Reihe.

    Dazu verschieben Sie den Text-Artikel mit der Maus auf das zugehörige Bild, lassen dann die Maustaste los und klicken auf das nachfolgend markierte Icon:

    Siehe auch: https://docs.zeta-producer.com/das-grid-system-verstehen.html

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Ihr anderes Problem müssten Sie konkreter beschreiben, oder auch in einem Screenshot zeigen, das konnte ich nach der Beschreibung nicht verstehen.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Nachtrag: Ich hätte zu dem Thema doch noch einmal eine Frage.

    Ich habe die letzten drei Tage versucht mit der mobile Ansicht noch ein bisschen was hinzubekommen, da mir diese sehr wichtig ist, aber verzweifle ein wenig.

    Folgendes Problem habe ich:

    Meine Web-Ansicht ist folgende:

    Und die mobile Ansicht dazu sieht so aus:


    Mein Problem ist, dass Bilder, die links vom Text sind in der mobilen Ansicht über dem Text dargestellt werden und Bilder, die rechts vom Text sind in der mobilen Ansicht unter den Text verschoben werden.

    Das finde ich speziell bei dem Beispiel der Startseite sehr schade und unübersichtlich.

    Ich habe schon mit:

    <style>

    .c4 {

    display: all;

    }

    media (max-width: 660px) {

    .c4 {

    display: none

    }}

    </style>


    Die Bilder ganz ausstellen können. Das ist aus mehreren Gründen ein bisschen ungünstig, da ich eigentlich nicht möchte, dass Inhalte bei der mobilen Ansicht weg gelassen werden, auch keine Bilder und zum anderen, da auch andere Bilder bzw. Blöcke die Bezeichnung c4 haben und somit folgernd auch verschwinden.

    Meine Wunschvorstellung für die Startseite wäre folgende:

    --> Also, dass das Bild die komplette Bildschirmbreite einnimmt und immer über dem Text angezeigt wird.

    Habt ihr dafür einen Tip?

    Ich habe mich schon so am CSS-Codieren die letzten Tage ausprobiert, aber bekomme es einfach nicht hin.


    Liebe Grüße

    Einmal editiert, zuletzt von lisa_marie.simon (29. März 2021 um 12:11)

  • Die Bildgröße wäre aber nur die Kirsche auf der Sahne. Mir würde schon reichen, wenn jemand wüsste, wie ich die Position von rechts sitzenden Bildern in der Webansicht auf über statt unter dem Text verschieben könnte.

  • Die Reihenfolge der 1-spaltigen Darstellung auf kleinen Bildschirmen richtet sich der Leserichtung nach (von Links nach Rechts). Das lässt sich nicht verändern. Wenn die Bilddateien in der entsprechenden Größe vorliegen (breit genug sind), sollten sie über die gesamte Breite dargestellt werden. Ihr "Obstsalat" ist aber z.B. nur 279px breit und kann daher ggf. nicht über die volle Breite des Inhaltsbereichs skaliert werden (vermutlich weil das Bild in der Desktopdarstellung nur über 4 Grid-Spalten geht und daher darauf skaliert wird).

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

Jetzt mitmachen!

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