Mein Problem ist jetzt nur, dass dort mit festen Größen gearbeitet wird und das die Wordpress-Gallerie nicht responsive ist, werden die Bilder runterskaliert und die Fläche der Bildunterschrift ragt über das Bild hinaus. Ich hoffe ihr versteht was ich meine.
Auf Mobilgeräten funktioniert der Effekt zwar nicht, aber Benutzer mit kleineren Monitoren bekommen doch dann sicher auch kleinere Bilder angezeigt oder habe ich da einen Denkfehler? Wie kann man dem entgegenwirken?
Schritt 1: definiere in deiner functions.php, dass die Galerien in html5 ausgegeben werden (findest du im WordPress-Codex unter add_theme_support, siehe https://codex.wordpress.org/Theme_Markup). Damit hast du kein br-Tag mehr nach soundsoviel Bildern (Spalteneinstellung) und keine vorgegebenen Abstände bei der Bildbeschriftung.
Dann definiere die Breite für das umschließende figure-Element und gib dem Bild
width: 100%;
height: auto;
Und dem Element, das den Beschriftungstext enthält, das Gleiche. Plus zusätzlich eine Angabe zum vertical-align.
Damit sollten Bild und Bildbeschreibung zusammenkommen.
Wenn dein Bild insgesamt kleiner wird, als die Bildbeschriftung lang ist, wird es Zeit, über einen neuen breaking Point (Media Query) in deiner css nachzudenken: weniger Bilder in einer Zeile oder Bildbeschriftung übers oder unters Bild.
Das mit dem Nebeneinander-Floaten ist ein Rechenspiel – oder du befasst dich mit css-box-sizing.
Oder du bleibst bei einer festen Größe und gibst den figure-Elementen ein
Da die Displays von Touch-Geräten unter Umständen gar nicht so klein sind (Tablets), ist es sinnvoll, hier nicht allein über Media Queries, d.h. die Bildschirmgröße, zu arbeiten, sondern zusätzlich mit wp_is_mobile (siehe https://codex.wordpress.org/de:Funktionsreferenz/wp_is_mobile) entweder für mobil oder für nicht-mobil eine weitere Klasse zu vergeben, so dass Touchgeräte auf jeden Fall die Bildbeschriftungen angezeigt bekommen können.
Gruß
helix