Hallo, ich möchte ein paar Bilder auf meiner Startseite aus dem Content Manager responsive darstellen wegen der Mobilen Ansicht, aber immer wenn ich es im Editor mit <img class="img-responsive" usw. eingebe, erscheinen die Bilder nicht mehr neben einander zentriert, sondern alle untereinander. Code: <div class="row space-2"> <img class="img-responsive" src="images/hundetierfutter.png" style="width: 370px; height: 397px;" /><img class="img-responsive" src="images/katzenfutter.png" style="width: 370px; height: 397px;" /><img class="img-responsive" src="images/nagetierfutter.png" style="width: 370px; height: 397px;" /><img class="img-responsive" src="images/pferdefutter_neu.png" style="width: 370px; height: 397px;" /> </div> Was ist da falsch? Ist unser Testshop, kann leider keinen Link dazu einstellen. Danke.
Bei Deinem Code hebt Du die Klasse "img-responsive" wieder auf, da Du feste Größen im Style für height und width angibst. die Klasse "img-responsive" stellt die Höhe automatisch ein und die Breite auf maximal 100% (Bildgröße). Wenn die Bilder im Original zu groß sind, dann sollte man sich überlegen bei welcher Bildschirm-Auflösung (Desktop, Tablet und Smartphone) wieviel Bilder nebeneinander angezeigt werden sollen. Dem entsprechend stellt man die Grid-Spalten ein, dann hat man immer die richtige Anzeigegröße bei den Bildern. Als Beispiel: Wenn auf dem Desktop-Bildschirm 4 Bilder, auf dem Tablet 2 Bilder und auf dem Smartphone nur ein Bild pro Reihe angezeigt werden sollen, dann wäre der Code bei Dir wie folgt: HTML: <div class="row space-2"> <div class="col-xs-12 col-md-6 col-lg-3" <img class="img-responsive" src="images/hundetierfutter.png"/> </div> <div class="col-xs-12 col-md-6 col-lg-3" <img class="img-responsive" src="images/katzenfutter.png"/> </div> <div class="col-xs-12 col-md-6 col-lg-3" <img class="img-responsive" src="images/nagetierfutter.png" /> </div> <div class="col-xs-12 col-md-6 col-lg-3" <img class="img-responsive" src="images/pferdefutter_neu.png" > </div> </div>