Okay
  Public Ticket #1891144
Gutenberg, 2 Columns, unterschiedliche Breite
Closed

Comments

  •  6
    Gabriele started the conversation

    Hallo.

    Hoffentlich kann mir jemand helfen, ich arbeite schon seit Stunden erfolglos daran.

    Ich möchte den Gutenberg Block Spalten einfügen, 2 Spalten.

    Die erste Spalte soll ein kleines Bild enthalten, also ca. 30 % Breite einnehmen, die zweite Spalte soll den Text enthalten und ca. 70 % Breite haben.

    Ist das irgendwie möglich?

    Die Alternative "Block Medien und Text" gefällt mir nicht, weil auf kleinen Bildschirmen das Bild unerträglich klein wird. 

    Liebe Grüße, Gabriele

    Attached files:  2-Spalten-unterschiedliche-Breite.png

  •  6
    Gabriele replied

    Fast wäre es mir mit folgendem customized Code gelungen:

    /* Variable Breite für Spalten */

    @media (min-width: 52.5em) {
      .wp-block-columns[class*='has-'] > * {
        max-width: 20%;
      }
      .wp-block-columns[class*='has-'] > *:last-child {
        max-width: 75%;
    margin-left: 0px;
      }
    }

    die erste Spalte funktioniert wie sie soll, leider bleibt jedoch die zweite Spalte zu schmal.

    Dass ich damit den originalen Code von has-3-columns usw. zerstöre, ist mir bewusst, aber ich brauche nur diese einzige Variante mit 2 Spalten.

    LG Gabriele

  •  7
    Jennifer replied

    Ich habe zwar Uku und nicht Pukeko, aber schau dir mal Kadence Blocks an. Deren "Row" Block ist super, um mehrere Spalten zu benutzen und man kann eigentlich fast alles konfigurieren; insb. auch das Verhalten für Tablet und Handy. 

  •  6
    Gabriele replied

    Hallo Jennifer!

    Danke für den Tipp. Ich habs gleich einmal ausprobiert, es war leicht und hundertprozentig erfolgreich. Überraschender- und auch notwendigerweise sogar im IE und im Edge.

    Vielleicht sollte ich mein puristisches Bestreben, möglichst ohne Plugins auszukommen, doch aufgeben. Erstens hätte ich mir bereits sehr viel Versuch und Irrtümer und somit viel Zeit erspart und zweitens ergeben sich wirklich schöne Layout-Möglichkeiten dadurch - auch ohne Elementor. Super viele Einstellmöglichkeiten.

    Ich bin noch gespannt, ob mir Marc den Code anpassen kann, aber auf alle Fälle herzlichen Dank!

    Liebe Grüße, Gabriele

  •  774
    Marc replied

    Hallo Gabriele,

    du müsstest ergänzend die flex-basis-Eigenschaft anpassen:

    @media (min-width: 52.5em) {
      .wp-block-columns[class*='has-'] > * {
        max-width: 20%;
        flex-basis: 20%;
      }
      .wp-block-columns[class*='has-'] > *:last-child {
        max-width: 75%;
        margin-left: 0px;
        flex-basis: 75%;
      }
    }

    Viele Grüße
    Marc

  •  6
    Gabriele replied

    Danke Marc für diesen Hinweis. Das hat mir sehr geholfen.

    Liebe Grüße, Gabriele