Theme nicht mehr responsiv durch Tabelle

Guten Abend zusammen,

ich habe ein Template gekauft, mit dem ich eigentlich ganz zufrieden bin.
Nun habe ich aber ein Problem bezüglich der Responsibilität des Themes.

Wenn ich in der Artikelbeschreibung nur einen Text hinzufüge passt alles soweit. 
Sobald eine Tabelle o.ä. dazukommt nimmt die Breite zu und ist nicht mehr so 100% responsiv. Also der Inhalt passt sich nicht mehr an die Breite. 

Hat jemand einen Tipp? Der Theme-Entwickler will 200€ für Themeanpassungen.
Ich denke mir aber, dass da “nur” so ein Code Schnipsel wie

,

oder whatever fehlt.

PS: Ich weiß nicht, wieso die Screenshots hier so groß dargestellt werden. Ich hatte es hier im Editor per Quellcode nochmal verkleinert gehabt.

 

 

 

da niemand hier weiss welches template du gekauft hast und warum es zu diesem fehler kommt solltest du dich an den hersteller wenden.

In meinem Beitrag oben steht, dass der Entwickler dafür 200€ haben möchte. Damit ist sowohl die Beratung als auch Anwendung gemeint. In den Augen des Herstellers sei das kein Fehler.
Ich frage hier im Forum nach, da man dafür eventuell nur einen Codeschnipsel benötigt um die Breite anpassen zu lassen.

Glaskugel ist nicht notwendig nur HTML Kentnisse. 

 

Hallo @dumbledore42‍,

sieht aus als ob du das selbst so, als Tabelle, in die Discription gepflegt hast^^ Tabellen an sich sind für responsive Webdesign nicht geeignet… Ich mein was erwartest du soll auf dem Handy passieren, wenn du in eine Zeile sechs Spalten mit Bildern pflegst? 

Könntest ja einfach mehrere Tabellen untereinander, mit jeweils nur drei oder vier Spalten pflegen. Dann sollte es auch auf einem Handy ordentlich aussehen.

@karlharris

Natürlich hast du Recht bezüglich der Optik auf dem Smartphone. Es wäre viel besser wenn ich auf dem Smartphone das so machen würde wie du es gesagt hast. Das Problem ist dann, dass es auf dem Desktop Rechner schlecht aussieht. 6 Bilder nebeneinander sind auf dem Desktop perfekt. Auf dem Desktop 6 und auf dem Smartphone 3x2 wäre non plus ultra.
Ich weiß aber nicht, wie ich beides gleichzeitig bewerkstelligen kann.
Deswegen dachte ich, dass es eventuell einfacher wäre auf dem Smartphone eben alles auf eine Breite zu packen.

Für die Tabelle verwende ich aktuell folgenden Code: (Für ein Bild, bei mehren wird es dann verschachtelt, also zweimal td style etc…)

VW Golf / Variant 





 2016 - 2018 

 

“Auf dem Desktop 6 und auf dem Smartphone 3x2 wäre non plus ultra.”

Das wäre schon möglich, aber deutlich aufwendiger. Bspw. damit: https://css-tricks.com/accessible-simple-responsive-tables/#article-header-id-4

@karlharris‍

Habe mir den Link angesehen. CSS benutze ich schon sehr ungerne und dann noch Javascript  Gasp

Ich denke ich wäre vollstens zufrieden für den Anfang, wenn ich nur die Breite auf dem Smartphone anpassen könnte. 

Also ohne CSS wird es nicht gehen, ausserdem ist da ja auch zu viel Inhalt dann (also bspw. die Länge der Worte, da ja nicht im Wort umgebrochen wird). Rein theoretisch könntest du die font-size des tables kleiner machen, aber was machst dann bei sieben Spalten (ganz abgesehen davon das es auf dem Desktop dann doof aussieht^^)?

Ich würde dir empfehlen dich doch mal mit eigenen Theme-Anpassungen zu beschäftigen (Doku). Klar, anfangs ist das sicher mühsam und Zeit intensiv, aber auf lange Zeit gesehen wärst du etwas unabhängiger und kannst eigene Ideen ausprobieren - macht durchaus Spaß sobald die ersten Erfolgserlebnisse eintreten :slight_smile:

Hallo,

im Prinzip findet man auf dieser Seite alle Möglichkeiten, die einem zur Verfügung stehen: Tabellen im Responsive Webdesign | kulturbanause® blog . Kurz und knapp muss man aber sagen (steht auch im Artikel): Tabellen und responsive Webdesign passen nicht gut zusammen.

Man sollte ansich (so wie Shopware selbst auch) komplett auf Tabellen (als HTML-Code) verzichten und dies einfach mit entsprechenden < span > - oder < div > - Containern realisieren, bei denen man dann je Auflösung bestimmt, wie der Inhalt angezeigt werden soll (nebeneinander, untereinander, etc).

Im Prinzip hat der Theme - Hersteller aber recht: ein Fehler im Theme ist das wirklich nicht, da es ansich nicht mehr zeitgemäß ist, HTML - Tabellen zu verwenden - das wäre ja das gleiche, wenn man sagt: auf meinem Internet Explorer 6 wird der Shop nicht korrekt angezeigt.

So und so kommt man aber auf jeden Fall nicht drum herum, CSS verwenden zu müssen - oder man investiert das Geld (und nicht die eigene Zeit) in den Theme - Hersteller. Nur die Breite auf dem Smartphone anzupassen ist ja gar nicht zielführend, da man 6 Spalten niemals nebeneinander bei gängigen Smartphones kriegen würde.

Man könnte mit folgendem CSS die Spalten einfach statt nebeneinander alle untereinander anzeigen lassen:

td, th {
    display: block;
}

oder mit Beschränkung nur auf kleinere Auflösungen als LESS - Code:

@media screen and(max-width: @phoneLandscapeViewportWidth) {
    td, th {
        display: block;
    }
}

Schön und übersichtlich ist aber etwas anderes.

Grüße

Sebastian

Mach um die Tabelle einen Div Container mit einer CSS Klasse.

    ...

Und als CSS brauchs du dann noch

.overflow-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

So sollte sich die Tabelle dann nach Links/Rechts swipen lassen und dein Layout bleibt Responsive. Das ist meiner Meinung nach eine gute Möglichkeit Tabellen übersichtlich darzustellen. Ein Beispiel von mir kannst du dir unter https://jp-tec.de/eisenmann/12484/eisenmann-endschalldaempfer-bmw-f20-f21-114i-116i-118i-120i anschauen. Unten einfach mal auf Fahrzeuge klicken.

Zunächst einmal danke für eure Mühe. Ich wollte gerade das ein oder andere von euch probieren und musste zunächst einmal feststellen, dass CSS in der Artikelbeschreibung nicht akzeptiert wird.

Also wenn ich da CSS eingebe mit

dann wird der Bereich wieder gelöscht.  Lips-are-sealed
Also es wird gespeichert und wenn ich wieder in den HTML Code reingehe ist er wieder weg. 

Das solltest du natürlich auch in deinem eigenen Theme unterbringen (Doku).

Vielen Dank für den Hinweis