Neu Produktbeschreibung responsive machen JTL Shop 5

[Pascal B.]

Hallo zusammen,

ich habe eine eigentlich einfache Frage, finde aber nicht die genaue Syntax.
Ich möchte Bilder und Texte in meiner Produktbeschreibung einfügen.
Manche Bilder möchte ich auf der mobilen Ansicht nicht anzeigen und andere nicht für die Desktop Ansicht.
Wie löse ich das?

Hier ist eine beispielhafte Produktbeschreibung:

<div class="container" style="padding-bottom: 20px; display: flex; justify-content: center; align-items: center">
<div class="image"><img alt="..." src="https://media.4smarts.eu/img/12156.jpg" width="95%" height="95%" /> </div>
<div class="text" style="padding-left: 20px">
<h2 style="text-align: center">Extrem starke Powerbank - Lade bis zu 5 Ger&auml;te gleichzeitig</h2>
<p style="text-align: justify">Mit einer Leistung von bis zu 240W ist diese Powerbank bis zu 10-mal st&auml;rker als die meisten Powerbanks. Du kannst problemlos zwei Laptops mit einer Gesamtleistung von 160W schnell aufladen. Au&szlig;erdem verf&uuml;gt die Powerbank &uuml;ber insgesamt 5 Ladeausg&auml;nge. Damit kannst du auch dein MacBook, dein iPhone, dein iPad, deine Smartwatch und deine Apple Airpods gleichzeitig aufladen! Nat&uuml;rlich lassen sich nicht nur Apple Ger&auml;te, sondern alle g&auml;ngigen Laptops, Tablets, Smartphones und andere Ger&auml;te mit dieser Powerbank schnell aufladen. So viel Leistung in so einer kleinen Powerbank sind nur dank moderner Graphene Zellen erreichbar. Diese kommen auch in den Teslas zum Einsatz und &uuml;bertreffen herk&ouml;mmliche Lithium-Ionen-Batterien bei weitem.</p></div></div>
<div class="container" style="padding-bottom: 20px; display: flex; justify-content: center; align-items: center">
<div class="text" style="padding-right: 20px" ""="">
<h2 style="text-align: center">Durchladef&auml;hig - Lade die Powerbank auf, w&auml;hrend sie andere Ger&auml;te l&auml;dt</h2>
<p style="text-align: justify">Es ist nur eine Steckdose verf&uuml;gbar und du bist gerade auf dem Sprung? Mit unserer Grahene UltiMag Pro 24.000mAH kobalt Powerbank musst du dich nicht entscheiden welches Ger&auml;t du aufl&auml;dst. Du steckst einfach deine Powerbank an die Steckdose und die anderen Ger&auml;te an deine Powerbank an. So werden alle Ger&auml;te gleichzeitig aufgeladen. Du kannst dein zu Hause mit vollen Ger&auml;te Akkus und voller Powerbank verlassen. Ein wirklicher Vorteil gegen&uuml;ber anderen Powerbanks!</p></div>
<div class="image"><img alt="..." src="https://media.4smarts.eu/img/12158.jpg" width="95%" height="95%" /> </div></div>
<div class="container" style="padding-bottom: 20px; display: flex; justify-content: center; align-items: center">
<div class="image"><img alt="..." src="https://media.4smarts.eu/img/12160.jpg" width="95%" height="95%" /> </div>
<div class="text" style="padding-left: 20px">
<h2 style="text-align: center">In nur 90 Minuten selbst voll aufgeladen</h2>
<p style="text-align: justify">Viele Powerbanks ben&ouml;tigen 6 Stunden oder mehr, bis sie aufgeladen sind. Keiner m&ouml;chte so lange warten, besonders nicht, wenn man es gerade eilig hat. Unsere Graphene UltiMag Pro 24.000mAh ist dagegen in nur 90 Minuten voll aufgeladen. Du kannst also 4-5 Smartphone Ladungen in nur 90 Minuten speichern und einfach mitnehmen. Den aktuellen Ladestand der Powerbank kannst du jederzeit an der LED-Anzeige ablesen.</p></div></div>
<div class="container" style="padding-bottom: 20px; display: flex; justify-content: center; align-items: center">
<div class="text" style="padding-right: 20px" ""="">
<h2 style="text-align: center">Kabelloses Laden mit MagSafe kompatiblen Zubeh&ouml;r</h2>
<p style="text-align: justify">Du kannst deine MagSafe kompatiblen Apple Ger&auml;te sogar kabellos laden. Du ben&ouml;tigst also kein Kabel, sondern nur unsere Powerbank, um unterwegs deine Smartwatch oder dein iPhone aufzuladen. Deine Ger&auml;te werden durch integrierte Magnete perfekt positioniert und haften auf unserer Powerbank fest. Auch nicht Apple Produkte lassen sich mit dieser MagSafe Funktion nachr&uuml;sten. Siehe dir hierzu unser 4smarts UltiMag Sortiment an und r&uuml;ste ganz einfach dein Samsung Galaxy oder andere Smartphones nach.</p></div>
<div class="image"><img alt="..." src="https://media.4smarts.eu/img/12162.jpg" width="95%" height="95%" /> </div></div>
<div class="container" style="padding-bottom: 20px; display: flex; justify-content: center; align-items: center">
<div class="image"><img alt="..." src="https://media.4smarts.eu/img/12154.jpg" width="95%" height="95%" /> </div>
<div class="text" style="padding-left: 20px">
<h2 style="text-align: center">Schneller, st&auml;rker und l&auml;ngere Haltbarkeit, dank neuester Graphene Batterie Zellen</h2>
<p style="text-align: justify">Die reinen Zahlen sprechen f&uuml;r sich. Die Graphene UltiMag Pro leistet bis zu 240W Leistung, l&auml;sst sich in nur 90 Minuten vollst&auml;ndig aufladen und ist durchladef&auml;hig. Au&szlig;erdem kannst du sie bis zu 2000 mal ohne wesentlichen Verlust der Speicherkapazit&auml;t aufladen. Also t&auml;glich mehr als 5 Jahre lang! Das ist nur m&ouml;glich, da wir an Stelle der normalen Lithium-Ionen-Batterien hochwertige Graphene Zellen verbauen. Diese lassen sich schneller laden, erw&auml;rmen sich weniger und sind l&auml;nger haltbar. Nicht ohne Grund kommen Graphene Zellen auch bei Teslas zum Einsatz.</p></div></div>

 

[kflx]

Hallo @Pascal B. ,

so etwas kannst du folgendermaßen lösen. Achte aber darauf, dass du nicht das <img>-tag verwendest, sondern <picture>:

<picture>
      <source media="(min-width: 650px)" alt="img_1" srcset="URL zum Bild, welches bei einer Screenbreite von mindestens 650px angezeigt werden soll">
      <source media="(min-width: 430px)" alt="img_2" srcset="URL zum Bild, welches bei einer Screenbreite von mindestens 430px angezeigt werden soll">
      <img src="URL zum Bild, welches die restlichen Screenbreiten abdecken soll" alt="img" style="width:50%;">
</picture>

Ich hoffe, ich konnte dir damit helfen.

Beste Grüße!

 

[Milica V]

Hi @kflx

wir haben das versucht, leider nicht geschafft. Was wir eigentlich wollten, ist, dass die Seite ungefähr so aussieht:

http://www.w3.org/community/respimg/files/2013/10/imagegrid.png

Also dass in Mobile View die Elemente unter einander stehen. Ich habe verschiedene Optionen versucht und das ist die letzte Version des Codes:

<div style="padding-bottom: 20px; display: flex; justify-content: center; align-items: center">
<div>
<picture>
<source media="(min-width: 650px)" alt="img_1" srcset="https://media.4smarts.eu/img/12156.jpg" style="display: inline-block;">
<source media="(min-width: 430px)" alt="img_2" srcset="https://media.4smarts.eu/img/12156.jpg" style="display: inline-block;">
<img src="https://media.4smarts.eu/img/12156.jpg" alt="img" width="95%" height="95%">
</picture>
</div>
<div style="padding-left: 20px">
<h2 style="text-align: center">Extrem starke Powerbank - Lade bis zu 5 Ger&auml;te gleichzeitig</h2>
<p style="text-align: justify">Mit einer Leistung von bis zu 240W ist diese Powerbank bis zu 10-mal st&auml;rker als
die meisten Powerbanks. Du kannst problemlos zwei Laptops mit einer Gesamtleistung von 160W schnell aufladen.
Au&szlig;erdem verf&uuml;gt die Powerbank &uuml;ber insgesamt 5 Ladeausg&auml;nge. Damit kannst du auch dein
MacBook, dein iPhone, dein iPad, deine Smartwatch und deine Apple Airpods gleichzeitig aufladen! Nat&uuml;rlich
lassen sich nicht nur Apple Ger&auml;te, sondern alle g&auml;ngigen Laptops, Tablets, Smartphones und andere
Ger&auml;te mit dieser Powerbank schnell aufladen. So viel Leistung in so einer kleinen Powerbank sind nur dank
moderner Graphene Zellen erreichbar. Diese kommen auch in den Teslas zum Einsatz und &uuml;bertreffen
herk&ouml;mmliche Lithium-Ionen-Batterien bei weitem.</p>
</div>
</div>
<div style="padding-bottom: 20px; display: flex; justify-content: center; align-items: center">
<div style="padding-right: 20px">
<h2 style="text-align: center">Durchladef&auml;hig - Lade die Powerbank auf, w&auml;hrend sie andere Ger&auml;te
l&auml;dt</h2>
<p style="text-align: justify">Es ist nur eine Steckdose verf&uuml;gbar und du bist gerade auf dem Sprung? Mit
unserer Grahene UltiMag Pro 24.000mAH kobalt Powerbank musst du dich nicht entscheiden welches Ger&auml;t du
aufl&auml;dst. Du steckst einfach deine Powerbank an die Steckdose und die anderen Ger&auml;te an deine Powerbank
an. So werden alle Ger&auml;te gleichzeitig aufgeladen. Du kannst dein zu Hause mit vollen Ger&auml;te Akkus und
voller Powerbank verlassen. Ein wirklicher Vorteil gegen&uuml;ber anderen Powerbanks!</p>
</div>
<div>
<picture>
<source media="(min-width: 650px)" alt="img_1" srcset="https://media.4smarts.eu/img/12158.jpg" style="display: inline-block;">
<source media="(min-width: 430px)" alt="img_2" srcset="https://media.4smarts.eu/img/12158.jpg" style="display: inline-block;">
<img src="https://media.4smarts.eu/img/12158.jpg" alt="img" width="95%" height="95%">
</picture>
</div>
</div>
<div style="padding-bottom: 20px; display: flex; justify-content: center; align-items: center">
<div>
<picture>
<source media="(min-width: 650px)" alt="img_1" srcset="https://media.4smarts.eu/img/12160.jpg" style="display: inline-block;">
<source media="(min-width: 430px)" alt="img_2" srcset="https://media.4smarts.eu/img/12160.jpg" style="display: inline-block;">
<img src="https://media.4smarts.eu/img/12160.jpg" alt="img" width="95%" height="95%">
</picture>
</div>
<div style="padding-left: 20px">
<h2 style="text-align: center">In nur 90 Minuten selbst voll aufgeladen</h2>
<p style="text-align: justify">Viele Powerbanks ben&ouml;tigen 6 Stunden oder mehr, bis sie aufgeladen sind. Keiner
m&ouml;chte so lange warten, besonders nicht, wenn man es gerade eilig hat. Unsere Graphene UltiMag Pro 24.000mAh
ist dagegen in nur 90 Minuten voll aufgeladen. Du kannst also 4-5 Smartphone Ladungen in nur 90 Minuten speichern
und einfach mitnehmen. Den aktuellen Ladestand der Powerbank kannst du jederzeit an der LED-Anzeige ablesen.</p>
</div>
</div>
<div style="padding-bottom: 20px; display: flex; justify-content: center; align-items: center">
<div style="padding-right: 20px">
<h2 style="text-align: center">Kabelloses Laden mit MagSafe kompatiblen Zubeh&ouml;r</h2>
<p style="text-align: justify">Du kannst deine MagSafe kompatiblen Apple Ger&auml;te sogar kabellos laden. Du
ben&ouml;tigst also kein Kabel, sondern nur unsere Powerbank, um unterwegs deine Smartwatch oder dein iPhone
aufzuladen. Deine Ger&auml;te werden durch integrierte Magnete perfekt positioniert und haften auf unserer
Powerbank fest. Auch nicht Apple Produkte lassen sich mit dieser MagSafe Funktion nachr&uuml;sten. Siehe dir
hierzu unser 4smarts UltiMag Sortiment an und r&uuml;ste ganz einfach dein Samsung Galaxy oder andere Smartphones
nach.</p>
</div>
<div>
<picture>
<source media="(min-width: 650px)" alt="img_1" srcset="https://media.4smarts.eu/img/12162.jpg" style="display: inline-block;">
<source media="(min-width: 430px)" alt="img_2" srcset="https://media.4smarts.eu/img/12162.jpg" style="display: inline-block;">
<img src="https://media.4smarts.eu/img/12162.jpg" alt="img" width="95%" height="95%">
</picture>
</div>
</div>
<div style="padding-bottom: 20px; display: flex; justify-content: center; align-items: center">
<div>
<picture>
<source media="(min-width: 650px)" alt="img_1" srcset="https://media.4smarts.eu/img/12154.jpg" style="display: inline-block;">
<source media="(min-width: 430px)" alt="img_2" srcset="https://media.4smarts.eu/img/12154.jpg" style="display: inline-block;">
<img src="https://media.4smarts.eu/img/12154.jpg" alt="img" width="95%" height="95%">
</picture>
</div>
<div style="padding-left: 20px">
<h2 style="text-align: center">Schneller, st&auml;rker und l&auml;ngere Haltbarkeit, dank neuester Graphene Batterie
Zellen</h2>
<p style="text-align: justify">Die reinen Zahlen sprechen f&uuml;r sich. Die Graphene UltiMag Pro leistet bis zu
240W Leistung, l&auml;sst sich in nur 90 Minuten vollst&auml;ndig aufladen und ist durchladef&auml;hig.
Au&szlig;erdem kannst du sie bis zu 2000 mal ohne wesentlichen Verlust der Speicherkapazit&auml;t aufladen. Also
t&auml;glich mehr als 5 Jahre lang! Das ist nur m&ouml;glich, da wir an Stelle der normalen
Lithium-Ionen-Batterien hochwertige Graphene Zellen verbauen. Diese lassen sich schneller laden, erw&auml;rmen
sich weniger und sind l&auml;nger haltbar. Nicht ohne Grund kommen Graphene Zellen auch bei Teslas zum Einsatz.
</p>
</div>
</div>

Vielen Dank im Voraus!

 

[bbfdesign]

Moin,
ich vermute, dass Ihr ein Nova / Bootstrap basiertes Template habt? Ich solltet zunächst auf Style-Angaben in der Beschreibung verzichten. Definiert hier eigene Klassen die ihr dann über den Theme Editor oder in die custom.css eintragen könnt. Somit lässt sich in der Masse etwas verändern.

Dann schaut euch noch das hier z.B. an an: https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp

Das ist das Gridsystem von Bootstrap - in dieser Form, unter Angabe von den Klassen sollte euch zum Ziel bringen.

Wenn Ihr noch Fragen habt, gerne melden.

Gruß Björn

 

[Milica V]

Hi Björn,

danke sehr für deine Antwort und tut mir leid, dass ich nich früher geantwortet habe.

Ich habe das geprüft, und ja, wir benutzen Nova / Bootstrap basiertes Template. Das hat mir echt geholfen und ich habe den Code erneut geschrieben:

<div class="container" style="display: flex;">
<div class="row">
<div class="col-sm flex-first">
<picture>
<source media="(min-width: 650px)" alt="img_1" srcset="https://media.4smarts.eu/img/12156.jpg">
<source media="(min-width: 430px)" alt="img_2" srcset="https://media.4smarts.eu/img/12156.jpg">
<img src="https://media.4smarts.eu/img/12156.jpg" alt="img" width="95%" height="95%">
</picture>
</div>
<div class="col-sm">
<h2 style="text-align: center">Extrem starke Powerbank - Lade bis zu 5 Geräte gleichzeitig</h2>
<p style="text-align: justify">Mit einer Leistung von bis zu 240W ist diese Powerbank bis zu 10-mal stärker
als die meisten Powerbanks. Du kannst problemlos zwei Laptops mit einer Gesamtleistung von 160W schnell
aufladen. Außerdem verfügt die Powerbank über insgesamt 5 Ladeausgänge. Damit kannst du auch dein
MacBook, dein iPhone, dein iPad, deine Smartwatch und deine Apple Airpods gleichzeitig aufladen!
Natürlich lassen sich nicht nur Apple Geräte, sondern alle gängigen Laptops, Tablets, Smartphones und
andere Geräte mit dieser Powerbank schnell aufladen. So viel Leistung in so einer kleinen Powerbank sind
nur dank moderner Graphene Zellen erreichbar. Diese kommen auch in den Teslas zum Einsatz und
übertreffen herkömmliche Lithium-Ionen-Batterien bei weitem.</p>
</div>
</div>
</div>

<div class="container" style="display: flex;">
<div class="row">
<div class="col-sm">
<h2 style="text-align: center">Durchladefähig - Lade die Powerbank auf, während sie andere Geräte lädt</h2>
<p style="text-align: justify">Es ist nur eine Steckdose verfügbar und du bist gerade auf dem Sprung? Mit
unserer Grahene UltiMag Pro 24.000mAH kobalt Powerbank musst du dich nicht entscheiden welches Gerät du
auflädst. Du steckst einfach deine Powerbank an die Steckdose und die anderen Geräte an deine Powerbank
an. So werden alle Geräte gleichzeitig aufgeladen. Du kannst dein zu Hause mit vollen Geräte Akkus und
voller Powerbank verlassen. Ein wirklicher Vorteil gegenüber anderen Powerbanks!</p>
</div>
<div class="col-sm flex-first">
<picture>
<source media="(min-width: 650px)" alt="img_1" srcset="https://media.4smarts.eu/img/12158.jpg">
<source media="(min-width: 430px)" alt="img_2" srcset="https://media.4smarts.eu/img/12158.jpg">
<img src="https://media.4smarts.eu/img/12158.jpg" alt="img" width="95%" height="95%">
</picture>
</div>
</div>
</div>

<div class="container" style="display: flex;">
<div class="row">
<div class="col-sm flex-first">
<picture>
<source media="(min-width: 650px)" alt="img_1" srcset="https://media.4smarts.eu/img/12160.jpg">
<source media="(min-width: 430px)" alt="img_2" srcset="https://media.4smarts.eu/img/12160.jpg">
<img src="https://media.4smarts.eu/img/12160.jpg" alt="img" width="95%" height="95%">
</picture>
</div>
<div class="col-sm">
<h2 style="text-align: center">In nur 90 Minuten selbst voll aufgeladen</h2>
<p style="text-align: justify">Viele Powerbanks benötigen 6 Stunden oder mehr, bis sie aufgeladen sind.
Keiner möchte so lange warten, besonders nicht, wenn man es gerade eilig hat. Unsere Graphene UltiMag
Pro 24.000mAh ist dagegen in nur 90 Minuten voll aufgeladen. Du kannst also 4-5 Smartphone Ladungen in
nur 90 Minuten speichern und einfach mitnehmen. Den aktuellen Ladestand der Powerbank kannst du
jederzeit an der LED-Anzeige ablesen.</p>
</div>
</div>
</div>

<div class="container" style="display: flex;">
<div class="row">
<div class="col-sm">
<h2 style="text-align: center">Kabelloses Laden mit MagSafe kompatiblen Zubehör</h2>
<p style="text-align: justify">Du kannst deine MagSafe kompatiblen Apple Geräte sogar kabellos laden. Du
benötigst also kein Kabel, sondern nur unsere Powerbank, um unterwegs deine Smartwatch oder dein iPhone
aufzuladen. Deine Geräte werden durch integrierte Magnete perfekt positioniert und haften auf unserer
Powerbank fest. Auch nicht Apple Produkte lassen sich mit dieser MagSafe Funktion nachrüsten. Siehe dir
hierzu unser 4smarts UltiMag Sortiment an und rüste ganz einfach dein Samsung Galaxy oder andere
Smartphones nach.</p>
</div>
<div class="col-sm flex-first">
<picture>
<source media="(min-width: 650px)" alt="img_1" srcset=""https://media.4smarts.eu/img/12162.jpg">
<source media="(min-width: 430px)" alt="img_2" srcset="https://media.4smarts.eu/img/12162.jpg">
<img src="https://media.4smarts.eu/img/12162.jpg" alt="img" width="95%" height="95%">
</picture>
</div>
</div>
</div>

<div class="container" style="display: flex;">
<div class="row">
<div class="col-sm flex-first">
<picture>
<source media="(min-width: 650px)" alt="img_1" srcset="https://media.4smarts.eu/img/12154.jpg">
<source media="(min-width: 430px)" alt="img_2" srcset="https://media.4smarts.eu/img/12154.jpg">
<img src="https://media.4smarts.eu/img/12154.jpg" alt="img" width="95%" height="95%">
</picture>
</div>
<div class="col-sm">
<h2 style="text-align: center">Schneller, stärker und längere Haltbarkeit, dank neuester Graphene Batterie Zellen</h2>
<p style="text-align: justify">Die reinen Zahlen sprechen für sich. Die Graphene UltiMag Pro leistet bis zu 240W Leistung, lässt sich in nur 90 Minuten vollständig aufladen und ist durchladefähig. Außerdem kannst du sie bis zu 2000 mal ohne wesentlichen Verlust der Speicherkapazität aufladen. Also täglich mehr als 5 Jahre lang! Das ist nur möglich, da wir an Stelle der normalen Lithium-Ionen-Batterien hochwertige Graphene Zellen verbauen. Diese lassen sich schneller laden, erwärmen sich weniger und sind länger haltbar. Nicht ohne Grund kommen Graphene Zellen auch bei Teslas zum Einsatz.</p>
</div>
</div>
</div>


Und wie es aussieht, kannst du hier in der "Beschreibung" sehen: https://b2b.4smarts.eu/Ghostitem

Mein Problem ist jetzt, dass in der mobilen Ansicht flex-first und flex-last nicht wie im Video funktionieren:

Ich möchte gerne, dass die Reihenfolge den Elementen in der mobilen Ansicht Foto-Text, Foto-Text usw. ist. Was habe ich da falsch gemacht und wie kann ich den Fehler beheben bitte?

Und wie schaffe ich es, dass die Texte vertikal mittig platziert sind? Bitte siehe Screenshot: https://prnt.sc/5KSK4KtZIwfd Die gewünschte Positionierung ist rot markiert.

Danke sehr im Voraus!

Viele Grüße

Milica

 

[Pascal B.]

Das wäre wirklich gut zu wissen. Ich suche die selbe Lösung.

 

[Qwartz]

Das Template basiert auf BS4?
Dann würdest du einfach dem entsprechenden Bild z.B.

#Visible only on md  
> .d-none .d-md-block .d-lg-none

Im übrigen würde ich euch die Verwendung des "CODE" Blocks empfehlen, so liest sich das kaum einer überhaupt durch
mehr auf: https://getbootstrap.com/docs/4.0/utilities/display/