Mir ist in den letzten Wochen aufgefallen, dass bei ein paar Themes, die ich getestet habe, die Ausgabe der Bilder mit Bildunterschriften (Captions) nicht responsiv waren, auch wenn das Theme an sich responsiv war. Im einfachen deutsch gesagt: alles hat sich dem Bildschirm des Ausgabegeräts angepasst, nur die Bilder mit den Unterschriften nicht.

Das liegt daran, dass die Bildunterschriften standardmäßig mit einem Inline-Style bezüglich der Breite versehen sind, wie man in der folgenden Abbildung sehen kann:

WordPress: Captions mit fester Breite

Das Problem kann man ganz einfach umgehen in dem man den Bildunterschriften eine maximale Breite vergibt. Einfach die CSS-Angaben um folgende Regel bzw. bestehende Regel um eine zusätzliche Deklaration ergänzen:

.wp-caption {
    max-width: 100%;
}

Diese oder ähnliche CSS-Angaben befinden sich bereits in den Standard-Themes und dort muss man nicht tätig werden. Lediglich in den Themes, in denen diese Angabe fehlt muss man nachrüsten. Manchmal sind auch die Angaben zu den Abständen nicht vollständig oder fehlerhaft. So haben auch rechts ausgerichtete Bildunterschriften einen rechten bzw. die links ausgerichteten einen linken Abstand, was in meisten Fällen nicht erwünscht sein sollte.

Mit den folgenden CSS-Anweisungen kann man sowohl des Problem der Breite, wie auch das Problem der äußeren Abstände korrigieren:

.wp-caption             {max-width: 100%; margin: 10px 0;}
.wp-caption.alignleft   {margin: 10px 10px 15px 0;}
.wp-caption.alignright  {margin: 10px 0 10px 15px;}

Wie man im oberen Code-Beispiel sieht kann man mehrere Klassen zu Selektoren verknüpfen. Der Selektor .klasse1 .klasse2 ist ein Nachfahrenselektor und spricht alle Elemente mit class="klasse2" an, die sich innerhalb eines Elements mit class="klasse2" befinden.

Lässt man das Leerzeichen weg und macht stattdessen .klasse1.klasse2 dann wird ein komplett anderer Fall angesprochen und zwar nur die Elemente, wo gleichzeitig die class-Werte klasse1 und klasse2 auftauchen. Kleine Änderung mit einer großen Wirkung.

Damit hat man dann die Möglichkeit gezielt links- bzw. rechts-ausgerichtete Bildunterschriften (Captions) anzusprechen und mit passenden CSS-Anweisungen zu bestücken.

Mit den verknüpften Klassen als Selektor hat man die Möglichkeit auch anderer Szenarien anzusprechen, da WordPress recht freigiebig bei der Vergabe der Klassenwerte ist. Manch einen stört es zum Beispiel, dass im öffnenden body-Tag bis zu neun Klassen-Werte ausgegeben werden, aber so kann man hinterher per CSS komfortabel und zielgerichtet die Unterseiten ansprechen.

Divi: Premium-Theme für WordPress
Werbung

Geschrieben von Vladimir

Vladimir Simović, arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

  1. Das kann ja wohl nicht wahr sein…
    Nach einem redesign habe ich heute den ganzen tag gebraucht um eben genau dieses Problem zu fixen.
    Und jetzt kommst du mit der Lösung.

  2. Danke für diese übersichtliche Erklärung. Das werde ich gleich mal bei meinem Theme ausprobieren.

  3. Und wo genau kopiere ich diese Css anweisung hinein ? als custom css oder ?
    Ich möchte ja nicht, das nach einem update alles wieder überschrieben wird.
    Mit important! oder.. so viel Ahnung habe ich davon nämlich nicht. Bei manchen Fotos ist das Bild komplett mit der Bildunterchrift bedeckt ;-(
    Theme: Nirwana

    Ansonsten DANKE für diese Lösung

Kommentare sind geschlossen.