Hi Leute. auf www.firelandfoods.at/shop schaffe ich es einfach nicht den code so zu modifizieren, damit die bilder schön als block und zentriert angezeigt werden. Momentan sind die alle (scheinbar) links ausgerichtet. Wäre super wenn jemand eine Idee hat. Hier der Code: <div style="max-width:100%; align="center"> <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 class="row space-1"> <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-1"> <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-1"> <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-1"> <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" /> </a> </div> </div> </div>
Also mein Code sieht etwas anders aus. Ich würde die acht kleinen in einer Reihe die vier in einer Reihe machen. Dann kannst du mit md3 und md6 für die reihen nehmen. Nur mal so....
Hm. Komisch. Ich habe alle Bilder in Höhe 185 hochgeladen. Woran kann das liegen wenn er das automatisch ausrichtet?
@Hartwig aber gerade das wechselnde 2 -1 -1 // 1-1-2... gefällt mir. Wenns nicht geht muss ich das dann eh so machen
Jetzt steh ich am Schlauch. Auf welche Breite? Müsste ich den Abstand bei den kleinen "schätzen" und einrechnen?
Ich hätte zudem auch gerne das der ganze block mittig im content-bereih sitzt. derzeit ist scheinbar linksbündig und rechts um vieles mehr platz.
und Du hast links und rechts 15px padding Edit: 180 + 2x15 gibt 210, 2 x 210 gibt 420, also müssten die grossen 420 - 2x15 gibt 390 sein Aber warum die kleinen skaliert sind und die grossen nicht, weiss ich nicht. Es gibt da so ne funktion zum Bilder bearbeiten unter Bildoptienen > Image Processing. Vielleicht sind die einen bearbeitet, die anderen nicht.
Ich habe dir mal meine Datei geschickt, vielleicht kannst du dir was draus basteln. Das hier zu posten, hätte ichzuviel rausmachen müssen.
Der container ist 470 x 185 für die breiten bilder der container für die kleine bilder 207,5 x 177,5 die höhen passen da auch nicht das untere große bild ist nur! 771 x 185 da kannst auch breiter
Hab jetzt bei den oberen größeren die Breite auf 400 gesetzt und es sieht schon mal nicht schlecht aus. Bleiben nur noch 2 Fragen: - wie bekomme iich den ganzen Block mittig im Content - wie kann ich den Abstand zwischen den Bildern verringern Danke in jedem Fall bis hier her
ah, Du arbeitest dran, es kommt schon besser. DIe Rechnung dann mit 185 statt 180 machen. Nur für tablet und mobil könnte man oben noch ein padding geben, damit sie nicht so aufeinanderkleben