|
|||
Wie bekomme ich DAS responsive dargestellt
Hallo Forum,
ich habe dies bereits in einem anderen Forum gepostet, allerdings dort nicht die Hilfe bekommen, die ich mir erhofft hatte. Deshalb versuche ich es einmal hier. 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. Willkommen im Demo-Shop! 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) 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) 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. Porto - Homepage 7 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-Code:
<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> 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} Eine Live-Link gibt es leider noch nicht, da der Shop noch lokal läuft. Recht herzlichen Dank Geändert von BoneCrusher (07.06.2017 um 02:04 Uhr) |
Sponsored Links |
Sponsored Links |
|
|||
Es gibt nicht "einen Befehl" den man sich einfach kopieren kann, damit es so funktioniert wie es soll. Ein, und sei es nur durch ein Element, anderes HTML erfordert auch anderes CSS. Hier kann man dir leider, ohne den HTML/CSS Code deiner Seite zu kennen, nicht weiterhelfen.
Das einzige, was man dir mit den Infos raten kann: Untersuche die von dir gepostete Seite mit den Webdeveloper-Tools und verstehe, warum sich die Elemente so verhalten, wie sie es tun. Mit Copy-Paste von Code wirst du nicht an dein Ziel kommen. |
|
|||
Hallo,
ich dachte, dass der Link zur Beispielseite Willkommen im Demo-Shop! ausreicht, denn dort ist doch 1:1 der Code, den wir auch haben. Wir benutzen dieses Template. |
|
|||
Wenn ihr das template verwendet und es dort passt, dann muss es auch bei euch passen. Außer, ihr habt etwas anders gemacht als bei dem Template. Was ihr "anders" gemacht habt kann ich leider nicht erraten.
edit: Habt ihr überhaupt Grundkenntnisse vom responsive css? Das CSS so wie ihr es hier reinkopiert habt kann doch nur falsch sein. Da stehen zuerst responsive-Anweisungen drinnen nur um nachher wieder alle überschrieben zu werden.... |
|
|||
Hehe, nee, im original Template passt es ja auch nicht.
Ich dachte, dass ich es explizit erklärt habe, allerdings fällt es mir auch etwas schwer, da ich es mit Try & Error eben probieren muss. Wo habe ich mich denn unverständlich ausgedrückt, dann versuche ich das nochmal zu konkretisieren? Dankeschön Edit: Kenntnisse sind schon vorhanden, allerdings eher basics und responsive eben auch nur die basics. Geändert von BoneCrusher (07.06.2017 um 14:00 Uhr) |
|
|||
Bei mir werden die Teaser (mit den watches, etc.) auf 100% Breite aufskaliert wenn ich den Browser kleiner skaliere. Das ist doch das, was du möchtest?
die col-md-3 etc. klassen solltest du nicht verändern, damit zerschießt du dir sonst dein gesamtes layout (bzw. kannst es dir komplett zerschießen) CSS · Bootstrap (deutsch) Hier bitte mal die Seite durchlesen damit du weißt, was diese Klassen tun. Ja, es ist viel Text, aber das hilft dir hier weiter. Geändert von cloned (07.06.2017 um 14:05 Uhr) |
|
|||
Genau DAS möchte ich erzielen. Allerdings hat diese Seite (mit den Watches etc.) das Wunschergebnis was ich im Template von Themeart versuche nachzubauen. Denn dort skalieren die Bilder leider nicht auf 100%
Unser Template: Willkommen im Demo-Shop! Beispielseite mit Wunschergebnis: Porto - Homepage 7 |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
responsive Webseite | runner | CSS | 4 | 14.09.2015 22:45 |
Responsive Design und Schriftgrösse CSS | JörgS | CSS | 8 | 30.04.2015 15:42 |
Kundeninteresse an Responsive Layout | heiko_rs | Offtopic | 18 | 24.05.2013 14:37 |
Seite erst nach Reload richtig dargestellt | img | CSS | 3 | 10.03.2011 23:38 |
css - Linie oben wird statt gepunktet gestrichelt dargestellt | Agnes | CSS | 2 | 19.11.2007 16:58 |