Bei Bludit breite Bilder responsive machen

Veröffentlicht von admin - 23. August, 2016

Mit Hilfe des gerade erschienenen Plugins customcss für Bludit ist es nun ein Leichtes, selbst definiertes CSS hinzuzufügen.

Ich hatte beim Theme Business Casual das Problem, dass Bilder auf kleinen Displaygrößen nicht dynamisch (responsive) herunterskaliert werden. Mit folgender Zeile ist dem abgeholfen:

@media screen and (max-width:480px) {
img {
width: 100%;
}

Mit @media screen gibt man die Maximalbreite an (in diesem Beispiel), unter der die folgenden CSS-Auszeichnungen greifen sollen.

Dies gilt nun für alle img! Möchte man hier differenzieren, muss man Klassen definieren. Ein konkretes Beispiel gibt es bei Stackoverflow.

Alternativ kann man obigen Code auch der Datei themes/Business-Casual/css/business-casual.ccs hinzufügen. Ein Kommentar ist hilfreich, wenn man sich später fragt, warum man das hinzugefügt hat bzw. ob es im urspünglichen Code enthalten war.