Neu Probleme in der mobilen Ansicht bei zwei Artikeln

r0xXx · 31. Juli 2024

Hallo,

ich habe Probleme bei zwei Artikeln bei der horizontalen mobilen Ansicht. Hier wird der Text abgeschnitten. In der mobilen vertikalen Ansicht passt auch alles. Bei allen anderen Artikeln funktioniert der Zeilenumbruch. Es handelt sich um die folgenden beiden Seiten:

https://shop.perfectum-computer.de/...ifunktionsgeraet-Drucker-Scanner-Kopierer-Fax
https://shop.perfectum-computer.de/HP-LaserJet-Enterprise-M406dn-Schwarzweiss-Laserdrucker

martinwolf · 1. August 2024

Ich kann auf den beiden Seiten nirgends erkennen, dass etwas abgeschnitten wird. Kannst Du mal Screenshots posten, wie das ganze bei Dir ausschaut?

r0xXx · 1. August 2024

WhatsApp Image 2024-08-01 at 09.32.14.jpeg

Der html-code zu der Artikelbeschreibung sieht wie folgt aus:

<table style="width: 100%; border-collapse: collapse;" width="100%">
<tbody>
<tr>
<td style="border: 0px black; border-image: none; width: 310px; height: 19px;">Bedienfeld:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">6,85 cm Farb-Bedienfeld ohne Touch-Funktion mit Ziffernblock mit 24 Tasten</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Drucktechnologie:</td>
<td style="border: 0px black; border-image: none;">Laser</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Geschwindigkeit:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">Schwarz (A4, normal): Bis zu 38 Seiten/Min. (Standard); Bis zu 40 Seiten/Min. (HP High Speed-Modus); 
Schwarzweiß (A4, beidseitiger Druck): Bis zu 31 Bilder/Min.;</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Druckauflösung:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">Schwarzweiß (optimal): Bis zu 1200 x 1200 dpi; 
Technologie: 300 dpi, 600 dpi, HP FastRes 1200, HP ProRes 1200;</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Monatliches Druckvolumen:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">Bis zu 100.000 Seiten DIN A4; Empfohlenes monatliches Druckvolumen: 900 bis 4.800 Seiten</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Intelligente Softwarefunktionen für Drucken:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">Druckvorschau, Duplex, Drucken mehrerer Seiten auf 1 Blatt (2, 4, 6, 9, 16), Sortieren, Wasserzeichen, Speichern von Druckaufträgen, leicht zugänglicher USB-Anschluss</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Standard-Drucksprachen:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">HP PCL 6, HP PCL 5, HP PostScript Level 3-Emulation, nativer PDF-Druck (v1.7), Apple AirPrint™</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Schriftarten und Schriftbilder:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">105 interne TrueType-Schriftarten, skalierbar in HP PCL, 92 interne Schriftarten, skalierbar in HP PostScript Level 3-Emulation (Euro-Symbol enthalten); 1 interne 
Unicode-Schriftart (Andale Mono World Type); 2 interne Windows Vista 8-Schriftarten (Calibri, Cambria); Lösungen für zusätzliche Schriftarten über Flash-Speicherkarten 
von Drittanbietern verfügbar; HP LaserJet Schriftarten und IPDS-Emulation sind unter http://www.hp.com/go/laserjetfonts verfügbar</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Druckbereich:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">Ränder des Druckbereichs Oben: 2 mm, Unten: 2 mm, Links: 2 mm, Rechts: 2 mm; Maximaler Druckbereich : 212 x 352 mm</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Beidseitiger Druck:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">Automatisch (Standard)</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Prozessorgeschwindigkeit:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">800 MHz</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Anschlüsse:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">1x Hi-Speed USB 2.0-Hostanschlüsse; 1x Hi-Speed USB 2.0-Geräteanschluss; 1x Gigabit Ethernet 10/100/1000T-Netzwerk</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Optional:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">HP Jetdirect LAN-Zubehör 8FP31A; HP Jetdirect 3100w BLE/NFC/Wireless-Zubehör 3JN69A</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Wireless:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">Optional, wird mit dem Kauf eines Wireless-Hardwarezubehörs aktiviert. Dual-Band-Wireless-Station- und Wi-Fi Direct-Funktionen mit HP Jetdirect 3100w 
BLE/NFC/Wireless-Zubehör 3JN69A verfügbar</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Funktion für mobiles Drucken:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">HP ePrint; Apple AirPrint™; NFC Touch-to-Print (optional); Mopria™-zertifiziert; Drucken über Wi-Fi® Direct; ROAM-fähig für einfaches Drucken; PrinterOn Print</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Unterstützte Netzwerkprotokolle:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">Über die integrierte Netzwerklösung: TCP/IP, IPv4, IPv6; Drucken: TCP-IP Port 9100 direkter Modus, LPD, Web-Service-Druck, IPP 2.0, Apple AirPrint™, HP ePrint; 
Erkennung: SLP, Bonjour, Web Services Discovery; IP-Konfiguration: IPv4 (BootP, DHCP, AutoIP, Manual), IPv6 (Stateless Link-Local und über Router, Stateful über DHCPv6); 
Verwaltung: SNMPv2/v3, HTTP/HTTPS, Syslog; Sicherheit: SNMPv3, SSL-Zertifikatverwaltung, IPsec (IKEv1 und IKEv2), Firewall, 802.1x</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Netzwerkfunktionen:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">Ja, über HP Jetdirect Ethernet Embedded Print Server (Standard), der Folgendes unterstützt: 10Base-T, 100Base-Tx, 1000Base-T; 802.3az (EEE)-Unterstützung für Fast 
Ethernet- und Gigabit-Verbindungen; IPsec (Standard); 802.11a/b/g/n Wireless-Netzwerke (optional); Zweiter Ethernet-Anschluss (optional).</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Speicher:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">Standard: 1 GB ;Maximal: 1 GB</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Anzahl Papierfächer:</td>
<td style="border: 0px black; border-image: none;">2</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Medientypen:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">Papier (normal, EcoEFFICIENT, leicht, schwer, Bondpapier, farbiges Papier, vorbedruckt, vorgelocht, recycelt, rau); Umschläge; Etiketten</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Medienformat:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">Benutzerdefiniert (metrisch): Fach 1: 76 x 127 bis 216 x 356 mm; Fach 2: 105 x 148 bis 216 x 356 mm; Optionales Fach: 105 x 148 bis 216 x 356 mm 
Unterstützt (metrisch): Fach 1: A4, RA4, A5, B5 (JIS), B6 (JIS), 10 x 15 cm, A6, 16K, Umschläge (B5, C5 ISO, C6, DL ISO); Benutzerdefiniert: 76 x 127 bis 216 x 356 mm; 
Fach 2: A4; RA4; A5; B5 (JIS); B6 (JIS); A6; 16K; 105 x 148 bis 216 x 356 mm; Optionales Fach 3: A4; RA4; A5; B5 (JIS); B6 (JIS); A6; 16K; 105 x 148 bis 216 x 356 mm</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Gewicht:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">8.5 kg</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Abmessung:</td>
<td style="border: 0px black; border-image: none;">381 x 357 x 220 mm</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Garantie:</td>
<td style="border: 0px black; border-image: none; width: 1258px;">24 Monate</td>
</tr>
<tr>
<td style="border: 0px black; border-image: none; height: 19px;">Farbe:</td>
<td style="border: 0px black; border-image: none;">weiß</td>
</tr>
</tbody>
<colgroup>
<col style="width: 232pt;" width="310" />
<col style="width: 943pt;" width="1258" />
</colgroup>
</table>

martinwolf · 1. August 2024

Du hast oben horizontale Ansicht geschrieben, das tritt aber in der vertikalen Ansicht auf. Egal. Das Problem sind die Tabellen. Die sind nicht responsive. Du müsstest ein <div class="table-responsive"></div> um die Tabelle setzen. Da sorgt dann dafür, dass die Tabelle seitlich scrollbar wird. Weiter hilft es der Tabelle eine Klasse "table" zu geben, damit die auch schick ausschaut.

css-umsetzung · 2. August 2024

Ab einem Bestimmten Punkt macht es keinen Sinn mehr eine Tabelle als Tabelle darzustellen, insbesondere so eine Darstellung wie bei dir.

gib deiner Tabelle eine Klasse (im css gehe ich von der Klasse "css-block-table" aus), überlege dir ab welchem Punkt du das anders darstellen möchtest und erweitere dazu passend dein css.
Du solltest auch die Schriftarten Definitionen entfernen, nicht jeder hat Calibri auf seinem Rechner und ich sehe bei dir nicht, das du es über deinen Shop auslieferst.

Code:

@media(max-width:500px) {
.css-block-table tr,.css-block-table td, table.css-block-table,.css-block-table tbody {
    display:block ;
    width:100% !important;
    height:auto !important;
  }
  .css-block-table tr td:first-child {
    background-color:#1C1D2B;
    color:#fff ;
  }
  .css-block-table td {
    padding:5px;
  }
}

Dann sieht das bis 500px so aus:

Suche

Suche

Neu Probleme in der mobilen Ansicht bei zwei Artikeln

r0xXx

Aktives Mitglied

martinwolf

Offizieller Service Partner

r0xXx

Aktives Mitglied

martinwolf

Offizieller Service Partner

css-umsetzung

Offizieller Service Partner

Ähnliche Themen