Wie bekomme ich DAS responsive dargestellt

    Hallo Forum,

    ich verzweifle seit Tagen an einem für mich unlösbarem Problem. Ich bin kein Profi in Sachen HTML und PHP, allerdings weiß ich mir in der Regel zu helfen, nur hier bekomme ich es nicht hin.

    Folgendes:
    Wir haben dieses Template für unseren JTL Shop gekauft. http://flex.themeart.de/

    Das Template bekommen wir eigentlich ganz ordentlich bearbeitet, aber eine Sache stört uns ungemein. Dies betrifft die 3 Kategorieboxen direkt unterhalb vom Slider (siehe Screenshot)

    [Blockierte Grafik: https://abload.de/thumb/screen1cqubu.jpg]

    Wenn man jetzt den Browser bis zum Umbruch verkleinert, dann ist das dortige Verhalten für uns so nicht akzeptabel. Wir möchten gerne, dass die 3 Kategoriebilder bis an den Rand aufgezoomt werden. (siehe Screenshot)

    [Blockierte Grafik: https://abload.de/thumb/screen27yjt0.jpg]

    Ich sitze seit geschlagenen 4 Tagen an der Beseitigung des Problems, aber ich kriege es einfach nicht hin und weiß nicht mehr wo ich ansetzen soll.
    Eine Beispielseite habe ich gefunden, wo das gewünschte Ergebnis einfach perfekt umgesetzt wurde.

    http://www.newsmartwave.net/magento/porto/index.php/demo7_en

    In der Beispielseite ist oben der große Banner mit Huge Sale, Watches, Jackets etc. Genau dieses Verhalten möchte ich erzielen beim Umbruch bzw. bei mobiler Ansicht. Diese Seite habe ich mir lokal abgespeichert und mir ganz genau den Code rausgesucht, der für dieses Verhalten notwendig ist.

    HTML
    <div class="top-container"><div id="slideshow"><div class="homepage-grid-banner">  <div class="container">    <div class="row">      <div class="col-sm-6">        <div class="grid1" style="position:relative;">          <a href="#"><img src="http://www.newsmartwave.net/magento/porto/media/wysiwyg/porto/homepage/slider/07/banner1.jpg" width="566" height="536" alt="" /></a>        </div>      </div>      <div class="col-sm-3">        <div class="grid3 col-sm-margin" style="position:relative;">          <a href="#"><img src="http://www.newsmartwave.net/magento/porto/media/wysiwyg/porto/homepage/slider/07/banner3.jpg" width="279" height="264" alt="" /> </a>        </div>        <div class="grid4" style="position:relative;">          <a href="#"><img src="http://www.newsmartwave.net/magento/porto/media/wysiwyg/porto/homepage/slider/07/banner4.jpg" width="279" height="264" alt="" /> </a>        </div>      </div>      <div class="col-sm-3">        <div class="grid2" style="position:relative;">          <a href="#"><img src="http://www.newsmartwave.net/magento/porto/media/wysiwyg/porto/homepage/slider/07/banner2.jpg" width="279" height="536" alt="" /> </a>        </div>      </div>    </div>  </div></div>

    Die passenden CSS Klassen habe ich mir via Dust-Me-Data rausgesucht und in die theme.css eingetragen. Ergebnis bleibt 1:1 gleich wie im Beispiel-Link. Die angewendeten CSS Klassen wurde mir per Dust-Me-Data so ausgegeben.

    Code
    * {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}img {vertical-align: middle}.container {margin-right: auto;margin-left: auto;padding-right: 15px}@media (min-width:768px) {.container {    width: 750px}@media (min-width:992px) {.container {    width: 970px}@media (min-width:1200px) {.container {    width: 1170px}}.col-sm-3, .col-sm-6 {position: relative;min-height: 1px;padding-left: 15px;padding-right: 15px}@media (min-width:768px) {.col-sm-3, .col-sm-6 {    float: left}.col-sm-6 {    width: 50%}.col-sm-3 {    width: 25%}.row:after {clear: both}.homepage-grid-banner {padding:0}.homepage-grid-banner *{transition:all .2s}.homepage-grid-banner .row{margin-left:-4px;margin-right:-4px}.homepage-grid-banner .col-sm-3,.homepage-grid-banner, .col-sm-6{padding-left:4px;padding-right:4px}.homepage-grid-banner .col-sm-margin{margin-bottom:8px}.homepage-grid-banner img{width:100%}.homepage-grid-banner .grid1,.homepage-grid-banner .grid2,.homepage-grid-banner .grid3,.homepage-grid-banner .grid4{cursor:pointer;overflow:hidden;min-height:50px}.homepage-grid-banner .grid1:before,.homepage-grid-banner .grid2:before,.homepage-grid-banner .grid3:before,.homepage-grid-banner .grid4:before{content:"";width:100%;height:100%;position:absolute;left:0;top:0;background-color:#000;opacity:0;filter:alpha(Opacity=0);visibility:hidden;transition:all .2s}.homepage-grid-banner .grid1:hover:before,.homepage-grid-banner .grid2:hover:before,.homepage-grid-banner .grid3:hover:before,.homepage-grid-banner .grid4:hover:before{opacity:.1;filter:alpha(Opacity=10);visibility:visible}#slideshow img{max-width:100%;height:auto}

    Ich hoffe, dass ich mich verständlich ausgedrückt habe und mir jemand helfen kann, da ich mittlerweile mit meinem Latein am Ende bin und nicht mehr weiß wo ich noch ansetzen kann.

    Vielen Dank

    Hallo BoneCrusher,
    du könntest folgendes mal versuchen:
    In deiner HTML Datei schreibst du sowas wie eine CSS Weiche

    HTML
    <link rel="stylesheet" type="text/css" href="style/style_großes_dissplay.css" media="screen and (min-width: 1024px)">
<link rel="stylesheet" type="text/css" href="style/style_mittlers_display.css" media="screen and (max-width: 1023px) and (min-width: 800px)">
<link rel="stylesheet" type="text/css" href="style/style_kleines_display.css"  media="screen and (max-width: 799px)">


    Die entsprechenden 'width-Zuordungen' sollen natürlich an deine Bedürfnisse angepasst sein. Auch können natürlich mehrere (oder weniger) Stylesheets verlinkt werden. Nur aufpassen, dass die 'max-width' und 'min-width' Angaben zueinander passen und keine Lücken oder Überschneidungen entstehen.
    In die entsprechenden Stylesheets schreibst du dann die Formate, die du dir bei den in Frage kommenden Bildern vorstellst.

    z.B
    groß - img {width: 300px;}
    mittel - img {width: 33%;} /*für 3 Bilder in der Reihe*/
    klein - img {width: 100%;}

    die 100% bei 'klein' sorgen dann für eine Darstellung von Rand zu Rand.

    Hoffe, das hilft dir weiter.

    if(!sleep)

    {$sheep++;}