Neu Responsive Bilddarstellung Shop 4.06 Startseite funktioniert nicht

[BillundBilly]

Hallo zusammen,
ich würde mich freuen wenn sich einer der "Experten" einmal die Start-Seite www.billundbilly24.com anschauen kann.

Die Produktvorstellungen sind in einer Tabelle dargestellt.
Zwischen dem alt-Text und dem jeweiligen pic habe ich class="img-responsive" inzugefügt.
Allerdings ändert sich bei der mobilen Darstellung nichts.
Hängt das Problem mit der Tabelle zusammen?

Freue mich über einen Tipp.

Grüße

 

[Karalanta]

Hallo, du gibst zwar über
class="img-responsive" richtig vor, allerdings wird mit deinem style="width: 500px; height: 500px;" das wieder überschrieben.

style="width: auto; height: auto;"

wäre eine schnelle Lösung, dort kannst auch mit Prozent oder max werten arbeiten. Aber dort sollte zumindest das Problem liegen.
Zusätzliche Infos findest in jeder CSS Befehlsübersicht was die Parameter betrifft.

Hoffe das hilft dir weiter.

 

[BillundBilly]

Erstmal danke für deinen Tipp.
Ich habe es direkt eingefügt und bin "fast" am Ziel 😉

Positiv: Der Rahmen springt nun nicht mehr aus dem Bild
Die linke Seite scheint den neuen Befehl verstanden zu haben.

Problemchen: Die rechten pics wissen noch nix von ihren responsiven Auftrag.

Magst du nochmal drüber schauen, bitte 🙂

 

[Karalanta]

Du meinst die Textfelder?

Mein Vorschlag war ja auch nur ein wink wo der Fehler liegt, die Lösung ist nur "schnell und schmutzig".

Aber ich kann dann gleich nochmal schauen, bin aber echt kein experte. Wahrscheinlich müssen nur die Tabellen auch formatiert werden etwa 50% 50%

Edit:
<td style="width: 50%; text-align: center;"> führt zu dem Ergebnis was du dir denk ich mal vorstellst. Sollte aber natürlich dann über Klassen und oder CSS eleganter gelöst werden anstatt das händisch in den Code zu kloppen.

Im Grunde hat die gesamte Tabelle 100% währen die spalten sich dann 50% 50% teilen. Durch das Auto der Bilder werden jene dann entsprechend angepasst. Aber wir gesagt ich bin kein Programmierer sondern lerne das Autodidakt selbst noch im Moment. Ich kann dir nur die grobe Richtung weisen.

 

[FPrüfer]

Hallo,
für ein Full-Responsible-Layout solltest du auf Tabellen zu Layout-Zwecken verzichten. Tabellen und Responsive ist IMMER schwierig. 😉 Für deine gewünschte Darstellung bietet sich dagegen ein Layout mit Hilfe des Bootstrap-Grid-Systems (wie es an vielen Stellen im Shop verwendet wird) an. Mit den zugehörigen Media-Queries ändert sich dann z.B. dein Layout von Bild und Text nebeneinander zu Bild und Text untereinander, wenn der Platz nicht mehr ausreicht.

 

[BillundBilly]

Gut. Erstmal danke für eure Hilfe.
Habe jetzt was zusammengebrutzelt das funktioniert.
Alles per heute per learning by doing.

<div class="grid-system-row" style="margin-left:-5px;margin-right:-5px;">
	<div class="row" id="row-0">
	<div class="grid-space grid-space-left" data-row="1" data-row-space="0" data-space-span="6" style="float:left;width:50%;padding:5px 5px;"><a href="Savory-Olivenoel-native-extra-gefiltert" target="_self"><img class="img-responsive" src="/mediafiles/Bilder/savory%201%20liter%20titel.png"></a></div>
	<div class="grid-space grid-space-right hidden-xs" data-row="1" data-row-space="1" data-space-span="6" style="float:left;width:50%;padding:5px 5px;">
	<div style="position: relative; top: 25%">
	<p style="font-family: arial; text-align: center;"></p>
	<p style="font-family: arial; text-align: center;"></p>
	<p style="font-family: arial; text-align: center;"></p>
	<p style="font-family: arial; text-align: center;"><strong><span style="font-size:12px;">unser Klassiker<br>
	Savory Olivenöl native extra<br>
	gefiltert<br>
	1 Liter</span></strong></p>
	</div>
	</div>
	</div>
	</div>

Scheint CSS zu sein.
Ich bin auch so weit zufrieden; Bis auf eine Kleinigkeit.

Der Text zum jeweiligen Bild steht oben bündig mit dem Anfang des Bildes sollte aber zentriert sein.
Also zentriert sowohl horizontal als auch vertikal.

Also wer noch einen freundlichen Tipp hat - gerne her damit 🙂