Protostar - Responsive Design für Tabellen funktioniert nicht korrekt

Martin Ramsch · 20. September 2016

Hallo zusammen,

auf meiner Homepage nutze ich eine Tabelle mit drei Spalten (Text, 2 Grafiken - eine mit Link, Text) erzeugt mit TinyMCE Editor.
1) Am PC in der Smartphone Darstellung mit Strg-Shift-m werden die beiden Texte in zwei Spalten nebeneinander dargestellt. Die Grafiken werden komplett unterschlagen
2) Auf einem Smartphone direkt werden alle Spalten wie in der normalen PC-Darstelung nebeneinander dargestellt und müssen gescrollt werden, da sie mehr als dreimal so breit wie der Viewport dargestellt werden.

Link: http://farbraum.ruhr/

Wie lassen sich die drei Spalten am Smartphone untereinander darstellen?

Viele Grüße
Martin

Indigo66 · 20. September 2016

Zitat von Martin Ramsch

Wie lassen sich die drei Spalten am Smartphone untereinander darstellen?

Indem Du Deinen Inhalt nicht in einer Tabelle formatierts. Das hat man in den 90er so gemacht.
Das Template basiert auf Bootstrap2. Mit den passenden CSS-Klassen, geht das automatisch.
Du kannst auch versuchen die Startseite über einen Blog mit 3 Beiträgen in 3 Spalten anzeigen zu lassen. Joomla liefert da das passende Bootstrap-Konstrukt selber aus.

christine2 · 20. September 2016

Hallo Martin,

Zitat von Martin Ramsch

Wie lassen sich die drei Spalten am Smartphone untereinander darstellen?

ganz einfach: indem Du diese Tabellen verbannst. Auch unten bei: Farbraum ..... hast Du Tabellen genommen.

Man kann eine Tabelle responsive gestalten. Gäbe sogar paar Codes dazu. Vorausgesetzt: die fixen Breiten/Höhen usw. wären weg. usw. ....
Vergiss es: Weil ich spreche da Tabellen an, welche für eine "tabellarische Auflistung" gelten - aber nicht, um den Content zu "designen".

Protostart liefert doch mit seinen Bootsträpchen / Modulen doch Grundlagen, Spalten zu erstellen.
Schau Dir doch den Aufbau dazu an .....

Liebe Grüße, Christine

Edit zeigt: war zu spät

Martin Ramsch · 20. September 2016

Hi Indigo, Hi Christine,

erst einmal Dank an Euch beide für die schnelle Reaktion.
Die Standard-Positionen von Protostar kenne ich inzwischen. Aber wie lassen sich Spalten erzeugen?

Viele Grüße
Martin

Indigo66 · 20. September 2016

Zitat von Martin Ramsch

Aber wie lassen sich Spalten erzeugen?

Google ist Dein Freund.
http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem

Martin Ramsch · 20. September 2016

Hi Tom,

und was mache ich mit den Informationen?
Table-Struktur in <div class="spanX"> umwandeln in TinyMCE ?

Was genau?

Grüße
Martin

Indigo66 · 20. September 2016

Zitat von Martin Ramsch

Table-Struktur in <div class="spanX"> umwandeln in TinyMCE ?

Der Kandidat hat 100 Punkte. Nicht vergessen in die Codeansicht zu schalten.

Martin Ramsch · 21. September 2016

Hi Tom, Hi Christine,

habe die Tabellen im html-Modus des TinyMCE umgewandelt in:

Ergebnis ist full responsive und sieht prima aus. Nur schade, dass man bis auf html Level runtergehen muss.

Vielen Dank für Eure Hinweise

Viele Grüße
Martin

Elwood · 21. September 2016

Hallo Martin,

Zitat von Martin Ramsch

... Nur schade, dass man bis auf html Level runtergehen muss ...

man kann auch responsive Tabellen mit Extensions erstellen. Ob das bei deinem Problem geholfen hätte, habe ich nicht getestet:

https://extensions.joomla.org/…arorders=0&clearfilters=1

christine2 · 21. September 2016

Hallo Timo,

muss Dich leider enttäuschen Dein Link ist wunderbar, allerdings für "wirkliche Tabellen".

Nun ja, der Threadtitel ist da irreführend. Weiß nicht, ob Du die Seite von Anfang an gesehen hast.
Das Layout (content) war alles mit Tabellen aufgebaut.

Liebe Grüße, Christine

Elwood · 21. September 2016

Hallo Christine,

nein, ich habe die Seite nicht von Anfang an gesehen.
Ich hatte auch mal Probleme mit der Darstellung einer Tabelle auf dem Smartphone.
Eine Anwendung aus meinem Link hat mir dann geholfen.

Egal, der TE hat es ja hinbekommen.

Lieben Gruß.
Timo

Tags