Ok, mit den Werten von den Boxen funktioniert es jetzt - Muss ich mich leider von meinen schönen QUadraten verabschieden Aber so wird das jetzt was - morgen noch die Bilder neu machen damits nicht verzerrt wird - DANKESCHÖN ALLEN!
der content-space -index hat ne Breite von 900 px der inline-block nur 830. Im inline-block sind die Bilder zentriert Frag mich nicht warum das so ist Edit ich sehe gerade, Du hast es gefunden, jetzt ist auch der inline-block 900
Keine Sorge mach ich nicht Bin mit dem jetzt schon gut zufrieden. Einzig die großen Abstände zwischen den Bildern möcht ich noch verkleinern.
...und die Frage, welchen Code ich wo einfügen muss damit die mobile Ansicht wie angesprochen nicht zusammenpickt.
gerne - nur wohin und wie so weit reichen meine html kenntnisse leider noch nicht <div class="row space-1"> <div class="col-md-6 col-xs-12"> <a href="https://www.firelandfoods.at/shop/de/Chilipulver/"><img class="img-responsive" src="images/kachel_chili470.jpg" /> </a> </div> <div class="col-md-3 col-xs-6"> <a href="https://www.firelandfoods.at/shop/de/Chilisaucen-2/"><img class="img-responsive" src="images/Small_Chilifest_005.jpg" /> </a> </div> <div class="col-md-3 col-xs-6"> <a href="https://www.firelandfoods.at/shop/de/BBQ-Saucen/"><img class="img-responsive" src="images/Small_Chilifest_004.jpg" /> </a> </div> </div>
wie hast du das ausgerechnet? Wenn ich jetzt größere Bilder nehmen verschwindet dann zunehmend der Abstand dazwischen? wie muss ich das hochskalieren? Danke
Code: <div style="max-width:100%; align="> <div class="row space-1"> <div class="col-md-6 col-xs-12" style="text-align: center;"> <a href="https://www.firelandfoods.at/shop/de/Chilipulver/"><img class="img-responsive" src="images/kachel_chili.jpg" /> </a> </div> <div class="col-md-3 col-xs-12" style="text-align: center;"> <a href="https://www.firelandfoods.at/shop/de/Chilisaucen-2/"><img class="img-responsive" src="images/kachel_sauce.jpg" /> </a> </div> <div class="col-md-3 col-xs-12" style="text-align: center;"> <a href="https://www.firelandfoods.at/shop/de/BBQ-Saucen/"><img class="img-responsive" src="images/kachel_bbq.jpg" /> </a> </div> </div> </div> <div class="row space-2"> <div class="col-md-3 col-xs-12" style="text-align: center;"> <a href="https://www.firelandfoods.at/shop/de/Ketchup/"><img class="img-responsive" src="images/kachel_ketchu.jpg" /> </a> </div> <div class="col-md-3 col-xs-12" style="text-align: center;"> <a href="https://www.firelandfoods.at/shop/de/Chilisaatgut/"><img class="img-responsive" src="images/kachel_same.jpg" /> </a> </div> <div class="col-md-6 col-xs-12" style="text-align: center;"> <a href="https://www.firelandfoods.at/shop/de/gewuerze/"><img class="img-responsive" src="images/kachel_gew.jpg" /> </a> </div> </div> <div class="row space-3"> <div class="col-md-3 col-xs-12" style="text-align: center;"> <a href="https://www.firelandfoods.at/shop/de/carolina-reaper-produkte/"><img class="img-responsive" src="images/kachel_reap.jpg" /> </a> </div> <div class="col-md-3 col-xs-12" style="text-align: center;"> <a href="https://www.firelandfoods.at/shop/de/Rubs/"><img class="img-responsive" src="images/kachel_rub.jpg" /> </a> </div> <div class="col-md-6 col-xs-12" style="text-align: center;"> <a href="https://www.firelandfoods.at/shop/de/verpackungen/"><img class="img-responsive" src="images/kachel_verp.jpg" /> </a> </div> </div> <div class="row space-4"> <div class="col-md-6 col-xs-12" style="text-align: center;"> <a href="https://www.fireland-foods.com/privatelabeling"><img class="img-responsive" src="images/kachel_priv.jpg" /> </a> </div> <div class="col-md-3 col-xs-12" style="text-align: center;"> <a href="https://www.firelandfoods.at/shop/de/Fleischprodukte/"><img class="img-responsive" src="images/kachel_habanossi.jpg" /> </a> </div> <div class="col-md-3 col-xs-12" style="text-align: center;"> <a href="https://www.firelandfoods.at/shop/de/AWARD-WINNER/"><img class="img-responsive" src="images/kachel_award.jpg" /> </a> </div> </div> <div class="row space-5"> <div class="col-md-12 col-xs-12" style="text-align: center;"> <a href="https://www.firelandfoods.at/shop/de/Chilipflanzen/"><img class="img-responsive" src="images/kachel_pflanze.jpg" style="height:26px; width:26px" /> </a> </div> </div>
wie müsste ich die bilder skalieren damit der abstand "schrumpft". einfach prozentual auf allen seiten?
Guten Morgen, wenn ich jetzt 4 gleich große Bilder nehme mit 400x400px, hab ich in der zeile trotzdem den relativ großen abstand zwischen den bildern. www.firelandfoods.at/shop bekomme ich den irgendwie kleiner?
als erstes musst du mal sicherstellen das die Bilder nicht unterschiedlich groß sind... also die breiten alle gleich breit und die kleinen alle gleich groß sind... den Abstand zwischen den Bildern bekommst du nur weg, wenn du am CSS Code schraubst.
Danke - die Bilder unter untersten Testreihe sind alle gleich groß 400x400 Wie muss der CSS konfiguriert werden?
Ich kenne mich noch nicht so aus...aber vielleicht hilfts Unter Bild-Optionen gibt es den Schalter 'Bildgrösse berechen' aus oder an. Dann der Reiter Image Processing. Den Prozess laufen lassen. So wie ich es verstehe, macht der Prozess aus den Originaldateien, die natürlich grösser als die gewünschten sein sollten, dann angepasste Bilddateien in den jeweiligen Ordnern, siehe Screenshot vom ftp