Hallo, ich richte gerade einen Kundenshop ein und habe ein kleines Problem mit der Darstellung der Bilder auf der Startseite. Es sollen 4 Bilder sein in 2 Zeilen also 2 Bilder nebeneinander und darunter wieder 2 Bilder nebeneinander. Die Bilder sollten zudem noch responsiv sein also kleiner werden, wenn das Browserfenster verkleinert wird oder auf einem Smartphone aufgerufen wird. Soweit habe ich dass hinbekommen nur leider steht der Bilderblock etwas zu weit rechts und das 3. Bild ist irgendwie kleiner obwohl alle Bilder im Original exakt die gleichen Maße haben. Bitte euch um Unterstützung.
Gibts einen Link zum Shop oder zumindest den Quellcode, den verwendet hast? Würde bei der Problem-Analyse helfen
dabei solltest du dich an http://holdirbootstrap.de/css/#grid und http://holdirbootstrap.de/css/#images halten.
Der Shop ist noch nicht Online... aber anbei der Quellcode: Code: <style type="text/css"> .container-rs{ max-width:1168px; margin-left:0px; margin-right:auto; } @media screen and (max-width:1168px){ .container-rs{ max-width:1168px; margin-left:0px; margin-right:auto; } }</style> <div class="container"> <div class="container-rs"> <!--image1---> <div class="col-md-6" style="padding-right:0; float:left;"> <a href="https://meinedomain.de/index.php?cat=c6_Musik-musik.html#page=1&filter[6]=0&filter[7]=0&filter[8]=0&filter[9]=0&filter[11]=0&perpage_selector=24&display_selector=0&specialsOnly=0&s[10]=1:1651&s[2]=1:1001&s[3]=1:1051&s[4]=0:831&s[5]=0:23&minimumPrice=0&maximumPrice=775"><img class="img-responsive" src="images/musik1.png" /></a> </div> <!--image2---> <div class="col-md-6" style="padding-right:0; float:left;"> <a href="https://meinedomain.de/index.php?cat=c5_Sport---Hobby-sport-hobby-freizeit.html#page=1&filter[6]=0&filter[7]=0&filter[8]=0&filter[9]=0&filter[11]=0&perpage_selector=24&display_selector=0&specialsOnly=0&s[10]=1:1651&s[2]=1:1001&s[3]=1:1051&s[4]=0:831&s[5]=0:26&minimumPrice=0&maximumPrice=1400"><img class="img-responsive" src="images/sport1.png" /></a> </div> </div> </div> <div class="container"> <div class="container-rs"> <!--image1---> <div class="col-md-6" style="padding-right:0: float:left;"> <a href="https://meinedomain.de/index.php?cat=c7_Industrie---Standards-industrie-standards.html#page=1&filter[6]=0&filter[7]=0&filter[8]=0&filter[9]=0&filter[11]=0&perpage_selector=24&display_selector=0&specialsOnly=0&s[10]=1:1651&s[2]=1:1001&s[3]=1:1431&s[4]=0:1081&s[5]=0:86&minimumPrice=0&maximumPrice=2800"><img class="img-responsive" src="images/industrie1.png" /></a> </div> <!--image2---> <div class="col-md-6" style="padding-right:0; float:left;"> <a href="https://meinedomain.de/index.php?cat=c8_Manufaktur---Specials-manufactur-specials.html"><img class="img-responsive" src="images/manufaktur1.png" /></a> </div> </div> </div>
dir schießt das class="container" alles durcheinander, ich würde das so machen Code: <div class="row"> <div class="col-md-6">Bild1</div> <div class="col-md-6">Bild2</div> <div class="col-md-6">Bild3</div> <div class="col-md-6">Bild4</div> </div>
sry aber die Diskussion ist eigentlich überflüssig ... als Webdesigner sollte @(Link nur für registrierte Nutzer sichtbar.) das eigentlich beherschen ... Zumal ja auch noch geklärt werden muss, wie sich die Bilder verhalten sollen ...