CSS Code: Bildgröße auf mobilen Geräten ändern

In einigen Situationen macht es Sinn (oder ist gewünscht), sein Bild, das man in der Desktop-Ansicht in voller Breite anzeigen lassen möchte, auf Mobil jedoch proportional deutlich kleiner anzeigen zu lassen. In diesem Artikel erfährst du, wie du mit einem einfachen CSS Code genau das erreichen kannst.

 

CSS TUTORIAL

Die Bildgröße auf mobilen Geräten ändern

1. Füge ein Bild im FunnelBuilder ein, sofern du es noch nicht gemacht hast.
2. Stelle zunächst die Darstellungseinstellungen ein, sodass dein Bild auf Desktopgeräten die ideale Größe und Position hat.
3. Klicke auf das Zahnrad beim "Bild-Element" und klicke anschließend auf CSS. 
4. Nun fügst du einen der unten stehenden CSS Codes in das Feld "CSS (mobile Geräte)" und klickst auf Speichern, fertig!

 

CSS Code: Bild auf Mobil kleiner machen und linksbündig anzeigen

Wenn du dein Bild mobil gerne kleiner und linksbündig haben möchtest, nutze den folgenden Code. Mit "max-width:" kannst du maximale Bildbreite definieren. Wähle also eine kleine Zahl um das Bild kleiner zu machen oder eine größere Zahl, um es größer zu machen.

max-width: 200px; margin: 0; padding: 0px;

 

CSS Code: Bild auf Mobil kleiner machen und zentriert anzeigen

Wenn du dein Bild mobil gerne kleiner und zentriert haben möchtest, nutze den folgenden Code.

max-width: 200px; margin: auto; padding: 0px;

Hinweis: Klicke auf den jeweiligen Code um ihn automatisch in die Zwischenablage zu kopieren.