Content-Seite mit responsive Images

mach nocmal das untere gr0ße Bild breiter! das nur 771px breit

 

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!

 

Wie könnt ich noch den Abstand zwischen den Bildern verkleinern?

 

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.

 

das padding macht den Abstand, 2 x 15px

 

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>

 

so wird er größer möchte aber kleiner gehen

 

Deine Bilder sind ja auch noch unterschiedlich breit!

 

Reihe 1, 2 und 5 passt sieht gut aus auch mobile.....reihe 3 und 4 noch die Bildbreite anpassen!!

 

sorry ich raffs nicht

 

jep - mach ihc morgen wenn ich die originalgrafiken hab damit es nicht so verzerrt ist

 

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