Neu Responsive Bilddarstellung Shop 4.06 Startseite funktioniert nicht

  • Temporäre Senkung der Mehrwertsteuer Hier findet ihr gesammelt alle Informationen, Videos und Fragen inkl. Antworten: https://forum.jtl-software.de/threads/mehrwertsteuer-senkung-vom-01-07-31-12-2020-offizieller-diskussionthread-video.129542/

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

Aktives Mitglied
18. April 2020
159
44
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

Aktives Mitglied
18. April 2020
159
44
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.396
328
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 Forum Antworten Erstelldatum des Themas
Neu Rich Text - Responsive Design + Größe Einrichtung von JTL-Shop4 4
Neu WAWI Händler Preise - im shop anzeigen User helfen Usern - Fragen zu JTL-Wawi 0
Neu Online-Shop Kundengruppe wurde nicht zugeordnet Onlineshop-Anbindung 1
Neu Sprachen aus Wawi und Shop entfernen User helfen Usern - Fragen zu JTL-Wawi 3
Neu Artikel nach WaWi-Update und Umzug auf Server im Shop plötzlich gesperrt --> trotzdem verfügbar, aber grüne Markierung fehlt User helfen Usern - Fragen zu JTL-Wawi 5
Neu Bilder werden im Shop 5 nicht richtig angezeigt (PNG) Allgemeine Fragen zu JTL-Shop 2
Neu Newsletter Versand funktioniert nicht JTL Shop 5.0 JTL-Shop - Fehler und Bugs 1
Neu EVO Template für Shop 5 "404" Anzeige im Frontende Hersteller Templates für JTL-Shop 1
Neu OnPage Composer "Not found" - JTL Shop 5 Installation / Updates von JTL-Shop 3
Neu JTL shop 5 PLugin Fehlerhaft Installation / Updates von JTL-Shop 1
Neu Ebay Namen des Kunden in Shop 5 anzeigen Technische Fragen zu Plugins und Templates 0
Neu Freshdesk Widget in JTL Shop Plugins für JTL-Shop 0
Neu Shop 1:1 kopieren Installation / Updates von JTL-Shop 6
Neu Kundendatenimport in den JTL-Shop 5 Allgemeine Fragen zu JTL-Shop 1
Erforderliche Versionen Wawi und Shop für upgrade ? Upgrade JTL-Shop4 auf JTL-Shop5 2
Neu Links ändern / anpassen für Kategorien im Shop Allgemeine Fragen zu JTL-Shop 0
Neu S360 - Amazon Pay Plugin funktioniert nicht im 5er Shop Plugins für JTL-Shop 3
Neu JTL Search funktioniert im 5er Shop nicht Plugins für JTL-Shop 1
Neu JTL Shop 5 - Demos? Allgemeine Fragen zu JTL-Shop 9
Neu Konfigurationsartikel nicht findbar im Shop schalten Arbeitsabläufe in JTL-Wawi 1
Neu Nach JTL Shop 5 Update nicht mehr in google zu finden ? Allgemeine Fragen zu JTL-Shop 24
Neu Die Anzeigen-URL erreicht unsere Shop Seite nicht User helfen Usern - Fragen zu JTL-Wawi 2
Neu Shop 5 Consent Manager JTL-Shop - Fehler und Bugs 4
Neu Attribute waWi -> SHOP User helfen Usern - Fragen zu JTL-Wawi 0
Neu Fehlende Variablen im Shop 5? JTL-Shop - Fehler und Bugs 7
Neu Shop 5 langsam nach Erstinstallation Allgemeine Fragen zu JTL-Shop 4
Neu Shop 5 Blog-Hauptkategorie steht laut Google auf noindex - wo ändern? Betrieb / Pflege von JTL-Shop 4
Neu [Shop4] Problem mit einer Versandarten und der Bezeichnung im Shop (Dopplung) Technische Fragen zu Plugins und Templates 1
Neu Fehler nach Update von gehostetem Shop 4 auf 5 Installation / Updates von JTL-Shop 1
Neu Seiten für Variationen im Shop deaktivieren Allgemeine Fragen zu JTL-Shop 2
Neu neues Google Shopping Plugin für Shop 5 - alter Fehler bei den Versandkosten Plugins für JTL-Shop 1
Neu JTL Shop Schriftgröße und Hintergrundfarbe User helfen Usern - Fragen zu JTL-Wawi 0
Neu Google Pagespeed motzt über die OPC Gallerie im JTL Shop 5 Allgemeine Fragen zu JTL-Shop 0
Neu Sortierreihenfolge von Artikeln wird nicht richtig im Shop angezeigt WooCommerce-Connector 0
Neu Alle Daten aus vorhandenem Shopware Shop in Wawi Synchronisieren Shopware-Connector 3
Neu Shop 5 - Variationsbilder Allgemeine Fragen zu JTL-Shop 2
Neu [Shop 5 / Blog ] Beiträge mit Tags versehen? Allgemeine Fragen zu JTL-Shop 1
Neu JTL-Shop 4 Variablen Newsletter Allgemeine Fragen zu JTL-Shop 0
Neu Mitlaufendes Header Menü in JTL Shop 5 (NOVA) Templates für JTL-Shop 2
Neu Kunden Daten Sync JTL-Wawi --> JTL Shop Allgemeine Fragen zu JTL-Shop 1
Neu Bezahlanbieter für JTL Shop 5??? Umstieg auf JTL-Shop 1
Neu JTL Shop Update 4.06 zu 5.0 Front End Internal Server Error Installation / Updates von JTL-Shop 7
Neu Megamenü nach Shop Zurücksetzugn verschwunden Allgemeine Fragen zu JTL-Shop 1
Neu EVO Template für Shop 5 Templates für JTL-Shop 0
Neu JTL Shop 5: JTL Google reCaptcha v2 JTL-Shop - Fehler und Bugs 0
Neu JTL Shop 5: Checkbox cannot link to link ID 67 JTL-Shop - Fehler und Bugs 0
Neu ausblenden Kategorienamen JTL5 Shop Templates für JTL-Shop 0
Neu Shop 5 - 17 Kategorien - wie anzeigen? JTL-Shop - BETA - Feedback und Bugmeldungen 12
Neu SHOP 4 SHOP 5 JTL-Shop - Fehler und Bugs 7
Neu Shop-4, export von Kundendaten für Shop-5 Allgemeine Fragen zu JTL-Shop 4
Ähnliche Themen