Ich arbeite gerade am neuen Honeygrid Design und nehme als Anhaltspunkt den Testshop 1. Nun wollte ich gern, wie auch im Testshop 1 als erstes 3 kleine Grafiken in den Content "Index" einfügen. Habe mir die Maße der Bilder im Testshop angeschaut und so übernommen und 3 Grafiken in PS erstellt. Diese hab ich dann hochgeladen im Contentmanager. Ob es responsive dargestellt wird bzw. funktioniert, teste ich immer, indem ich meine Seitenleiste im Browser einblende und ausblende. Im Testshop sind die Bilder immer nebeneinander und werden kleiner, wenn man weniger Platz zum Anzeigen hat. Bei mir im Shop bleiben die Bilder immer gleich groß und werden dann halt untereinander geschoben, wenn alle drei nicht mehr hin passen. Nun habe ich aufgrund Dennis´ Tipp hin mir die CSS Klasse angeschaut und diese ist im Testshop bei "Erweitert -> Formatvorlagenklasse" eingetragen. Ich habe mir die Klasse angeschaut und raus kopiert, daraus habe ich mir dann auch eine "img-responsive.css" angelegt und sie in "templates/honeygrid/usermod/css" rein gelegt, da ich der Meinung bin, da kommt es rein. Lange Rede, kurzer Sinn: Es klappt so nicht. Die Bilder bleiben immer gleich groß und werden nicht responsive verändert, wenn der Bildschirm kleiner wird.
ich habe das mit 2 Bildergrößen gelöst: Code: <img class="img-responsive space-1" data-image="images/content/index/sale-1.png" data-image-lg="images/content/index/sale-1.png" data-image-xs="images/content/index/sale-small.png" src="images/content/index/sale-1.png" /> wenn Bilder auf dem Handy gar nicht angezeigt werden sollen, muss ein: class="hidden-xs" rein
Die Klasse "img-responsive" scheint ja serienmäßig zu existieren. Wenn ich diese Klasse da eintrage, dann sind alle Bilder untereinander...
folgenden Code mal als Beislpiel platzieren -------------------------------------------------- Code: <style type="text/css"> .container-rs{ max-width:1300px; margin-left:auto; margin-right:auto; } @media screen and (max-width:1000px){ .container-rs{ max-width:390px; margin-left:auto; margin-right:auto; } } </style> <div class="container"> <div class="container-rs"> <!--image1---> <div class="col-md-4" style="padding-right:0; float:left;"> <a href="/deine-kategorie-link-url.html"> <img class="img-responsive" src="https://www.gambio-shop.de/shop4/images/content/index/kategorie-kleid.png" /></a></div> <!--image2---> <div class="col-md-4" style="padding-right:0; float:left;"> <a href="/deine-kategorie-link-url.html"> <img class="img-responsive" src="https://www.gambio-shop.de/shop4/images/content/index/kategorie-computer.png" /></a></div> <!--image3---> <div class="col-md-4" style="padding-right:0: float:left;"> <a href="/deine-kategorie-link-url.html"> <img class="img-responsive" src="https://www.gambio-shop.de/shop4/images/content/index/kategorie-ballon.png" /></a></div> </div> <br /> </div> --------------------------------------------------