Seiten Text responsive!°?

[EComMan1]

Hi

ichhabe ledier nichts passendes gefunden
wie bekomme ich den text responsive das er nicht übereinander liegt?



Wir nutzen Impulse


beste grüße

[Gabe]

Hey @EComMan1 

Danke für das Bild und ich kann nicht erkennen ob das im Produktstamm im Rich Text Editor (RTE) ist oder auf der PDP. Hast du vieleicht einen Link zu einem Beispiel?

Scheinbar handelt es sich hier um fehlenden Platz in der Tabelle v.a. auf einem kleineren Screen. Da wird es zu erwarten sein, dass die Tabellen Titel und manche Fields etwas ineinander mergen oder übereinander lagern, sprich, zerquetscht aussehen. 

Somit wirst du etwas Coding in das HTML der Tabelle einbauen müssen um deine HTML-Tabellen responsive zu machen und zu verhindern, dass sich die Zelleninhalte überlappen. Du kannst beispielsweise die CSS-Media-Queries und die table-layout: auto Property verwenden, um das Tabellenlayout an unterschiedliche Bildschirmgrößen anzupassen und den Overlap der Cell Contents zu verhindern.

Je nach deinen genauen Anforderungen und der Komplexität der Tabellen musst du vielleicht weitere Styles anpassen oder hinzufügen.

Eine Ressource, die ich für das HTML Styling, v.a. bei Tabellen, sehr hilfreich finde, ist W3Schools.com und hier ist eine Resource die euch vielleicht weiterhelfen kann, oder zumindest euch in die richtige Richtung verweisen, zusammen mit einem HTML Experten.

[EComMan1]

Guten Morgen Gabe

genau es handelt sich um den RTE editor

einen Link habe ich leider nicht hier ist aber mal der HTML CODE

<p>Selbstverständlich versenden wir die Schmuckstücke versichert. Ihre Ware erreicht Sie sicher verpackt und es befinden sich keine Logos außen auf dem Paket, die auf den Inhalt hindeuten. Vorab senden wir Ihnen eine Mail mit der Sendungsverfolgungsnummer (Tracking-ID), mit der Sie den Status Ihrer Bestellung jeder Zeit selbst verfolgen können.<br /><br />Wir versenden das Schmuckstück sobald Ihr Geld bei uns eingegangen ist. Die Zustellung bei Ihnen erfolgt in 1–3 Werktagen. Sollten Sie es einmal besonders eilig haben, bieten wir Ihnen den Express-Versand an (Lieferzeit 1–2 Werktage).<br /><br /> </p>
<table class="responsive-table"></table>
<table style="width: 94.7369%;">
<tbody>
<tr style="height: 22px;">
<td style="width: 36%; text-align: center; height: 22px;"><strong>Land</strong></td>
<td style="width: 57%; text-align: center; height: 22px;"><strong>Bestellsumme</strong></td>
<td style="width: 60.6207%; text-align: center; height: 22px;"><strong>Versandkosten</strong></td>
<td style="width: 58.3793%; text-align: center; height: 22px;"> <strong>Lieferzeit</strong></td>
</tr>
<tr style="height: 15.4px;">
<td style="width: 36%; height: 15.4px; text-align: center;">Deutschland</td>
<td style="width: 57%; height: 15.4px; text-align: center;">
<p>unabhängig<br />Zuschlag f. dt. Inseln<br />Express</p>
</td>
<td style="width: 60.6207%; height: 15.4px; text-align: center;">
<p>0 €<br />17 €<br />15 €<strong> </strong></p>
</td>
<td style="width: 58.3793%; height: 15.4px; text-align: center;">1-3 Werktage<br />1-2 Werktage</td>
</tr>
<tr style="height: 15.4px;">
<td style="width: 36%; text-align: center; height: 15.4px;">Belgien</td>
<td style="width: 57%; height: 15.4px; text-align: center;">bis 450 <span>€</span><br />bis 1.000 <span>€</span><br />bis 10.000 <span>€</span></td>
<td style="width: 60.6207%; height: 15.4px; text-align: center;">25 <span>€</span><br />40 <span>€</span><br />50 <span>€</span></td>
<td style="width: 58.3793%; height: 15.4px; text-align: center;">2-3 Werktage</td>
</tr>
<tr style="height: 15.4px;">
<td style="width: 36%; text-align: center; height: 15.4px;">Frankreich</td>
<td style="width: 57%; height: 15.4px; text-align: center;">bis 450 <span>€</span><br />bis 1.000 <span>€</span><br />bis 10.000 <span>€</span></td>
<td style="width: 60.6207%; text-align: center; height: 15.4px;">25 <span>€</span><br />40 <span>€</span><br />50 <span>€</span></td>
<td style="width: 58.3793%; text-align: center; height: 15.4px;">2-4 Werktage</td>
</tr>
<tr style="height: 15.4px;">
<td style="width: 36%; text-align: center; height: 15.4px;">Großbritannien*</td>
<td style="width: 57%; height: 15.4px; text-align: center;">bis 450 <span>€</span><br />bis 1.000 <span>€</span><br />bis 10.000 <span>€</span></td>
<td style="width: 60.6207%; text-align: center; height: 15.4px;">35 <span>€</span><br />50 <span>€</span><br />160 <span>€</span></td>
<td style="width: 58.3793%; text-align: center; height: 15.4px;">3-4 Werktage</td>
</tr>
<tr style="height: 15.4px;">
<td style="width: 36%; text-align: center; height: 15.4px;">Italien</td>
<td style="width: 57%; height: 15.4px; text-align: center;">bis 450 <span>€</span><br />bis 1.000 <span>€</span><br />bis 10.000 <span>€</span></td>
<td style="width: 60.6207%; text-align: center; height: 15.4px;">25 <span>€</span><br />40 <span>€</span><br />50 <span>€</span></td>
<td style="width: 58.3793%; text-align: center; height: 15.4px;">2-4 Werktage</td>
</tr>
<tr style="height: 15.4px;">
<td style="width: 36%; text-align: center; height: 15.4px;">Luxemburg</td>
<td style="width: 57%; height: 15.4px; text-align: center;">bis 450 <span>€</span><br />bis 1.000 <span>€</span><br />bis 10.000 <span>€</span></td>
<td style="width: 60.6207%; text-align: center; height: 15.4px;">25 <span>€</span><br />40 <span>€</span><br />50 <span>€</span></td>
<td style="width: 58.3793%; text-align: center; height: 15.4px;">2-4 Werktage</td>
</tr>
<tr style="height: 15.4px;">
<td style="width: 36%; text-align: center; height: 15.4px;">Niederlande</td>
<td style="width: 57%; height: 15.4px; text-align: center;">bis 450 <span>€</span><br />bis 1.000 <span>€</span><br />bis 10.000 <span>€</span></td>
<td style="width: 60.6207%; text-align: center; height: 15.4px;">25 <span>€</span><br />40 <span>€</span><br />50 <span>€</span></td>
<td style="width: 58.3793%; text-align: center; height: 15.4px;">1-4 Werktage</td>
</tr>
<tr style="height: 15.4px;">
<td style="width: 36%; text-align: center; height: 15.4px;">Österreich</td>
<td style="width: 57%; height: 15.4px; text-align: center;">bis 450 <span>€</span><br />bis 1.000 <span>€</span><br />bis 10.000 <span>€</span></td>
<td style="width: 60.6207%; text-align: center; height: 15.4px;">25 <span>€</span><br />40 <span>€</span><br />50 <span>€</span></td>
<td style="width: 58.3793%; text-align: center; height: 15.4px;">2-4 Werktage</td>
</tr>
<tr style="height: 15.4px;">
<td style="width: 36%; text-align: center; height: 15.4px;">Polen</td>
<td style="width: 57%; height: 15.4px; text-align: center;">bis 450 <span>€</span><br />bis 1.000 <span>€</span><br />bis 10.000 <span>€</span></td>
<td style="width: 60.6207%; text-align: center; height: 15.4px;">25 <span>€</span><br />40 <span>€</span><br />55 <span>€</span></td>
<td style="width: 58.3793%; text-align: center; height: 15.4px;">2-4 Werktage</td>
</tr>
<tr style="height: 15.4px;">
<td style="width: 36%; text-align: center; height: 15.4px;">Portugal</td>
<td style="width: 57%; height: 15.4px; text-align: center;">bis 450 <span>€</span><br />bis 1.000 <span>€</span><br />bis 10.000 <span>€</span></td>
<td style="width: 60.6207%; text-align: center; height: 15.4px;">25 <span>€</span><br />40 <span>€</span><br />50 <span>€</span></td>
<td style="width: 58.3793%; text-align: center; height: 15.4px;">4-5 Werktage</td>
</tr>
<tr style="height: 15.4px;">
<td style="width: 36%; text-align: center; height: 15.4px;">Schweiz*</td>
<td style="width: 57%; height: 15.4px; text-align: center;">bis 450 <span>€</span><br />bis 1.000 <span>€</span><br />bis 10.000 <span>€</span></td>
<td style="width: 60.6207%; text-align: center; height: 15.4px;">40 <span>€</span><br />50 <span>€</span><br />160 <span>€</span></td>
<td style="width: 58.3793%; text-align: center; height: 15.4px;">3-5 Werktage</td>
</tr>
<tr style="height: 15.4px;">
<td style="width: 36%; text-align: center; height: 15.4px;">Spanien</td>
<td style="width: 57%; height: 15.4px; text-align: center;">bis 450 <span>€</span><br />bis 1.000 <span>€</span><br />bis 10.000 <span>€</span></td>
<td style="width: 60.6207%; text-align: center; height: 15.4px;">25 <span>€</span><br />40 <span>€</span><br />50 <span>€</span></td>
<td style="width: 58.3793%; text-align: center; height: 15.4px;">4-5 Werktage</td>
</tr>
</tbody>
</table>
<p style="margin-bottom: 24px;" data-sanitized-data-mce-fragment="1" data-sanitized-data-mce-style="margin-bottom: 24px;">* Hinzu kommen ggf. Zölle und Abgaben bei der Annahme in dem jeweiligen Land<br /><br />Bitte nehmen Sie Kontakt mit uns auf, wenn Sie einen Versand in ein hier nicht aufgeführtes Land oder mit einem Bestellwert von über 10.000 € wünschen. Vielen Dank<span style="font-size: 11pt;" data-sanitized-data-mce-fragment="1" data-sanitized-data-mce-style="font-size: 11pt;"><span style="line-height: normal;" data-sanitized-data-mce-fragment="1" data-sanitized-data-mce-style="line-height: normal;"><span data-sanitized-data-mce-fragment="1" data-sanitized-calibri=""><span style="font-size: 12.0pt;" data-sanitized-data-mce-fragment="1" data-sanitized-data-mce-style="font-size: 12.0pt;"> <br /></span></span></span></span></p>

[Gabe]

@EComMan1 

Oh danke und lass uns das mal anschauen. Ob ich eine definitive Lösung geben kann weiss ich nicht aber schauen wir mal weiter.

Es kann sein, dass es die prozentuale Breite der Zellen in deiner Tabelle die Ursache sein kann. Die Breiten der Zellen in einer Zeile summieren sich auf mehr als 100 %, wodurch sich deswegen ggf. die Zellen überlappen. Du könntest also die Breiten so anpassen, dass die Gesamtbreite 100% nicht überschreitet. Eine Möglichkeit wäre, die Breite jeder Zelle auf 25 % zu ändern (da du vier Spalten hast) oder sie nach deinen Wünschen anzupassen, solange sie sich insgesamt zu 100 % addieren. Bei kleinen Bildschirmen könnte sich der Inhalt der Zellen jedoch trotzdem überlappen.

Um die Responsiveness zu verbessern, könntest du, wie gesagt, CSS-Media-Queries verwenden, um das Layout der Tabelle an die Bildschirmgröße anzupassen. Auf kleineren Bildschirmen könntest du die Zellen zum Beispiel übereinander stapeln. Hier ein Beispiel wie du das CSS ändern kannst um die Tabelle mehr Responsive zu machen:

<style>
 .responsive-table {
   width: 100%;
   overflow-x: auto;
 }

 .responsive-table td {
   white-space: nowrap;
 }

 @media screen and (max-width: 600px) {
   .responsive-table td:before {
     content: attr(data-label);
     float: left;
     text-transform: uppercase;
     font-weight: bold;
   }

   .responsive-table td {
     display: block;
     text-align: right;
   }

   .responsive-table td:last-child {
     border-bottom: 2px solid #ddd;
   }
 }
</style>

Dann in der HTML-Tabelle Datenbeschriftungen (data-labels) für jede Zelle verwenden. Beispiel:

<tr>
 <td data-label="Land" style="text-align: center;">Deutschland</td>
 <td data-label="Bestellsumme" style="text-align: center;">
   <p>unabhängig<br />Zuschlag f. dt. Inseln<br />Express</p>
 </td>
 <td data-label="Versandkosten" style="text-align: center;">
   <p>0 €<br />17 €<br />15 €<strong> </strong></p>
 </td>
 <td data-label="Lieferzeit" style="text-align: center;">1-3 Werktage<br />1-2 Werktage</td>
</tr>

So sollte auf kleineren Bildschirmen der Inhalt jeder Zelle beschriftet und als separater Block angezeigt, sodass Überschneidungen vermieden werden sollten. Achte darauf, dass du alle Zeilen entsprechend anpasst.

Bei weiteren Fragen empfehle ich sehr mit einem Experten wie @Finer oder @soenmez zu sprechen und gerne kann ich welche empfehlen. Veilt ihr derzeit am Shop und wollt ihr auch andere Änderungen zum Theme vornehmen?