1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

flex-box

Dieses Thema im Forum "Design" wurde erstellt von aubers, 9. August 2019.

  1. aubers

    aubers Well-Known Member

    Registriert seit:
    18. Februar 2016
    Beiträge:
    137
    Zustimmungen:
    1
    Wordpress: 5.2.2.
    Theme: Astra
    Pagebuilder: Elementor
    Woocoomerce Shop
    URL: https://bit.ly/2JEsSMv

    Moin, moin liebe Wpler,

    ich habe mit Hilfe von flex-box den Warenkorb nach meinen Wünschen editiert und habe ein div, bei dem ich nicht weiterkomme.

    Es gibt im Warenkorb 3 wichtige divs (Namen sind keine echte classes):
    1) Gutschein Message (kommt nur wenn man auf "Gutschein anwenden" klickt
    2) Die Produkte und Preise
    3) Warenkorbsumme

    Aus Layoutgründen habe ich "Produkte und Preise" und "Warenkorbsumme" in eine Zeile per "display: flex;" "flex-direction: row;" verschoben. Der Breakpoint für "flex-direction: column;" liegt bei 1300px.

    Istzustand:

    Das div "Gutschein Message" mit der class ".woocommerce-error, .woocommerce-info, .woocommerce-message" erscheint in einer Zeile mit den anderen beiden divs, wodurch sich das gesamte Layout verschiebt. Siehe Bild 1

    Sollzustand:

    Das div "Gutschein Message" liegt eine Zeile überhalb der anderen beiden divs mit voller Breite.
    Siehe Bild 2

    Anmerkung: Um den Warenkorb zu sehen, einfach zum Shop gehen und Produkte in den Warenkorb hinzufügen.

    Ich habe enige Fehlsversuche mit flex-wrap usw. gehabt. Danke für eure Hilfe!
     

    Anhänge:

  2. aubers

    aubers Well-Known Member

    Registriert seit:
    18. Februar 2016
    Beiträge:
    137
    Zustimmungen:
    1
    Problem behoben. Habe die error message auf position: absolute; width: 100%; gesetzt und mit margin die anderen divs etwas noch unten korregiert.
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden