zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wie bekomme ich DAS responsive dargestellt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.06.2017, 02:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.06.2017
Beiträge: 4
BoneCrusher befindet sich auf einem aufstrebenden Ast
Standard 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>
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.

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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.06.2017, 07:15
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von BoneCrusher Beitrag anzeigen
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.
Ich habe jetzt zweimal deinen Text gelesen und finde nicht den Ansatz was du jetzt eigentlich genau von uns Wissen möchtest.

Du hast doch etwas, was so funktioniert wie du möchtest. Was sollen wir jetzt tun?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.06.2017, 09:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 07.06.2017, 13:21
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.06.2017
Beiträge: 4
BoneCrusher befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 07.06.2017, 13:55
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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....
Mit Zitat antworten
  #6 (permalink)  
Alt 07.06.2017, 13:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.06.2017
Beiträge: 4
BoneCrusher befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #7 (permalink)  
Alt 07.06.2017, 14:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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)
Mit Zitat antworten
  #8 (permalink)  
Alt 07.06.2017, 14:05
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.06.2017
Beiträge: 4
BoneCrusher befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:34 Uhr.