Textumlauf bei Bildblock mit Textblock

Hallo,
ich habe mir das gerade angesehen. Geht es um den Block mit dem Text „Tuberkulose – ein Top-Killer seit Jahrhunderten*? – Das funktioniert bei mir auch mobil korrekt. Ich sehe nicht „erste Buchstaben oder Worte neben dem Bild“.

Danke für den Hinweis, dass du die Frage auch in dem anderen Forum gestellt hast.

Viele Grüße
Hans-Gerd

@hage
ich denke, das Problem an deinem Vorschlag ist, dass der „das Bild umfließende Text“ dabei verloren geht.

@thoys1
Damit nur von dir ausgewählte Bereiche angesprochen werden, ist es nötig, das Bild und den Text in eine Gruppe zu packen. Dieser Gruppe muss eine CSS-Klasse zugewiesen werden, in diesem Fall die CSS-Klasse myclass. Wie das geht, zeigt dieses Video.

Anschließend benötigst du noch dieses CSS-Snippet:

@media (max-width: 650px) {
  .myclass .wp-block-image  {
    float: none;
    display: block;
    overflow: hidden;
  }
}

Die oben beschriebenen Gruppe kannst du so oft einsetzen (auch auf derselben Seite / im selben Artikel), wie du magst. Du musst dafür aber jeder Gruppe die CSS-Klasse myclass zuweisen.

Die 650px (aus dem CSS-Snippet) bestimmen den Punkt, an dem der Text unterhalb des Bildes angezeigt wird. Den kannst du nach eigenen Präferenzen ändern.

Benötigst du für einen anderen Fall – z. B. eine andere Bildbreite – einen anderen Umbruch, dann erstelle alles wie oben beschrieben, gib der Gruppe aber eine andere CSS-Klasse, z. B. newclass

Der CSS-Code würde dann so aussehen

@media (max-width: 850px) {
  .newclass .wp-block-image  {
    float: none;
    display: block;
    overflow: hidden;
  }
}

Auch hier kannst du die px (hier mal auf 850px geändert) nach Belieben anpassen. Ich hoffe, das Prinzip ist nun klar 🙂

CSS-Code kann man (wenn kein Child-Theme vorhanden ist) im WordPress-Backend >> Design >> Customizer >> zusätzliches CSS (ganz ans Ende in einer neuen Zeile) einfügen.

Abgekürzter Weg -> (dein-domainname.de/wp-admin/customize.php), also:

/wp-admin/customize.php an deine Domain anhängen >>, aufrufen und dann auf zusätzliches CSS klicken, das funktioniert auch (noch?), wenn du unter dem Menüpunkt Design kein „Customizer“ mehr findest.

Falls du ein Child-Theme verwendest, dann trage den CSS-Code in die Datei style.css ganz ans Ende in einer neuen Zeile ein.

Nach dem Abspeichern musst du den Browsercache leeren, drücke dafür CTRL (STRG) + SHIFT + Entf gleichzeitig, dadurch wird in den gängigen Browsern ein Fenster zum Löschen geöffnet (weitere Hilfe dazu). Auf einem Smartphone musst du natürlich den Browser-Cache anders entfernen.

Solltest du ein Cache-Plugin installiert haben, leere auch diesen Cache. Nun teste auf der Seite, ob du eine Änderung siehst.

Noch ein Hinweis:
Für CSS-Snippets benötigst du i. d. Regel kein zusätzliches Plugin. PHP-Snippets kann man in ein eigenes Plugin, in die functions.php oder mithilfe eine Plugins einfügen, hierfür gibt es aber genügend kostenlose Plugins bspw. Fluentsnippets.

Hallo,
super – freut uns. Danke für die Rückmeldung.

Denkst du bitte beim nächsten Mal daran, das Thema dann auch als gelöst zu markieren, wenn das Thema für dich erledigt ist. Danke.

Die Option findest du rechts in der Sidebar. Das habe ich jetzt schon gemacht.

Sonst schauen wir unnötigerweise immer wieder in ein bereits gelöstes Thema. 😉

Viele Grüße
Hans-Gerd

@thoys1
gerne 🙂