Neu Responsive Bilddarstellung Shop 4.06 Startseite funktioniert nicht

BillundBilly

Neues Mitglied
1. Oktober 2020
3
0
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

Sehr aktives Mitglied
18. April 2020
448
170
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.
 
  • Gefällt mir
Reaktionen: BillundBilly

BillundBilly

Neues Mitglied
1. Oktober 2020
3
0
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

Sehr aktives Mitglied
18. April 2020
448
170
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.

Screenshot 2020-11-12 112412.png
 
Zuletzt bearbeitet:

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
1.878
518
Halle
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

Neues Mitglied
1. Oktober 2020
3
0
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 :)
 
Ähnliche Themen
Titel Forum Antworten Datum
Neu Neues Plugin: Hersteller Slider Portlet (Zentrierungs- oder Schwarz/Weiß-Modus, Responsive Anpassung..) inkl. 5 kostenlosen Lizenzen Plugins für JTL-Shop 4
Neu Badges / Artikelsticker bei JTL Shop 5.3.0 Templates für JTL-Shop 0
Neu - Lieferzeit in Wochen / Monaten statt Tagen SHOP-4080 - wo finde ich diese Möglichlichkeit im Admin Bereich Installation / Updates von JTL-Shop 1
Neu Bug Popup/eModal - JTL Shop 5.3 JTL-Shop - Fehler und Bugs 0
Neu Gravierender Fehler in der Shop Software Betrieb / Pflege von JTL-Shop 3
Gelöst Shop 5.3.1 Fatal Error Gelöste Themen in diesem Bereich 2
Neu Händlerbund Plugin lässt sich nicht installieren Shop ver. 5.3.0 Plugins für JTL-Shop 1
Neu Shop extrem langsam Betrieb / Pflege von JTL-Shop 8
Neu Shop mehrsprachig machen Allgemeine Fragen zu JTL-Shop 6
Neu JTL-Shop 5.3 - Aktuell 5.3.1 Releaseforum 1
Neu JTL 1.8.12.0 - Artikelattribut für Shop importieren - Format CSV-Datei / Hilfe bei Import von individuellen Attributen für JTL-Shop (googlekat) JTL-Ameise - Ideen, Lob und Kritik 1
Neu Merkmalübersetzung wird im Shop nicht angezeigt JTL-Shop - Fehler und Bugs 2
JTL Shop Gutscheine über JTL-Vouchers erstellen Allgemeine Fragen zu JTL-Vouchers 1
Neu Hilfe - Performanceproblem mit Shop durch Worker JTL-Shop - Fehler und Bugs 27
Neu JTL Shop Gutscheine über JTL-Vouchers erstellen Allgemeine Fragen zu JTL-Shop 0
Neu Shop Suchfunktion Probleme mit (HTML-)Sonderzeichen JTL-Shop - Fehler und Bugs 0
Kundenattribute aus Shop übernehmen und aus Wawi zurück an Shop übermitteln Einrichtung JTL-Shop5 1
Neu Produktdaten aus Shop zur Wawi WooCommerce-Connector 9
Neu Unterstützung bei JTL5-Shop-Überarbeitung gesucht - Template/Plugin uvm. Dienstleistung, Jobs und Ähnliches 1
Neu Shop in Unterverzeichnis führt dazu, dass Inhalte aus dem übergeordneten Verzeichnis im Shop gezeigt werden JTL-Shop - Fehler und Bugs 3
Neu Kuriosum - Shop 5.1.5 mit Datenbank 5.2.4 Mischbetrieb nach fehlgeschlagenem Update Installation / Updates von JTL-Shop 8
Neu Weiße Seite nach Update Shop 5.1.5. auf 5.2.4 Installation / Updates von JTL-Shop 24
Neu E-Commerce-Effizienz steigern: Welche Programmiersprache verbessert die JTL-Shop-Entwicklung? Technische Fragen zu Plugins und Templates 1
Neu Kompatibilitätsliste JTL Shop & JTL Wawi Installation / Updates von JTL-Shop 2
Neu JTL-Shop 5 Paypal Zahlung 30 Tage Zahlungsziel Allgemeine Fragen zu JTL-Shop 6
Neu JTL-Shop 5.3.0 RC3 Fehler nach Update Portlet Banner, fehlendes Produkt JTL-Shop - Fehler und Bugs 0
Neu Funktionsattribut unverkäuflich wird nicht an den Shop übertragen Allgemeine Fragen zu JTL-Shop 1
Neu Umstieg von Shopware 5 zu JTL Shop 5 - Ranking behalten Allgemeine Fragen zu JTL-Shop 2
Neu Verbindungsproblem Wawi (1.8.12.0) zum JTL-Shop (5.2.4) über localhost User helfen Usern - Fragen zu JTL-Wawi 0
Neu Lizenz zu verkaufen für JTL-Shop Standard Edition Allgemeine Fragen zu JTL-Shop 4
Neu Suchbegriff hängt Shop auf?! Allgemeine Fragen zu JTL-Shop 2
JTL Shop : automatisch setzen: Verfügbar ab: 28.04.2024 (Vorbestellung möglich) JTL-Wawi 1.8 0
Neu Programmierung eines Tools zur Verwaltung einer Datentabelle (JTL Shop 5) Technische Fragen zu Plugins und Templates 6
I have faced an issue while the JTL Shop order has synchronized to the JTL WAWI 1.8 version. JTL-Wawi 1.8 0
Neu JTL Shop 5 Umfrage!? Allgemeine Fragen zu JTL-Shop 0
Neu Woocommerce mit JTL Connector "Die Shop-URL verweist nicht auf einen gültigen Shop" WooCommerce-Connector 4
Hosting JTL- Shop unter https://...12358.jtl-shop.de/ Einrichtung JTL-Shop5 0
Neu Issue SHOP-1348: Sortierung nach Preis unter Umständen fehlerhaft Allgemeine Fragen zu JTL-Shop 0
Neu JTL-Shop Standard Edition Lizenz zu verkaufen Umstieg auf JTL-Shop 7
Neu WAWI Kategorien werden im Shop nicht angezeigt Gelöste Themen in diesem Bereich 3
Neu Bilder werden Falsch im Shop angezeigt. WooCommerce-Connector 0
Neu Shop nicht mehr erreichbar HTTP 500 Error Betrieb / Pflege von JTL-Shop 1
Neu Wie kann ich im JTL-Shop einen Abwesenheitshinweis einstellen? Allgemeine Fragen zu JTL-Shop 1
Neu JTL Shop 5.30? Allgemeine Fragen zu JTL-Shop 9
Neu Anzeige von Neuheiten und Topsellern im JTL Shop 5 Allgemeine Fragen zu JTL-Shop 2
Neu Variationen im Shop Auswahl zurücksetzen (Plugin?) Betrieb / Pflege von JTL-Shop 3
Neu NEU ✔️ PDF-Angebots-Plugin für den JTL-Shop 5 - PDF Angebote von der Produktseite oder aus dem Warenkorb heraus generieren B2C / B2B Plugins für JTL-Shop 5
Neu JTL Shop funktioniert nicht mehr Allgemeine Fragen zu JTL-Shop 2
Neu Shop im Urlaub offline stellen/oder Benachrichten Allgemeine Fragen zu JTL-Shop 8
Neu JTL Shop Template Domain lösen? Allgemeine Fragen zu JTL-Shop 0

Ähnliche Themen