WBCE CMS Forum

tombal

Member

Responsives Design

Wie kann ich die Artikel auf der Übersichtsseite 2-spaltig darstellen? Ist dies ohne großen Aufwand möglich? Momentan sind die Artikel einzeln untereinander angeordnet. Den jetzigen Stand habe ich als Screenshot angehängt.

florian

Administrator

Re: Responsives Design

Das kommt aufs Template an. Wenn es auf einem CSS-Gridsystem (z.B. Fitgrid, Responsee) oder Bootstrap basiert, kannst Du bei den Seiteneinstellungen und/oder Feldeinstellungen die Ausgabe entsprechend anpassen, für Fitgrid sähe das z.B. in etwa (!) so aus:

<div class="fg6">
[THUMB]
<h3><a href="[LINK]">[TITLE]</a></h3>
[DESCRIPTION]
<p><a href="[LINK]">Details...</a></p>
</div>

Für andere Gridsysteme analog. Man müsste dann noch schauen, dass alle Einträge immer gleich hoch sind, dafür hatte ich vor einiger Zeit mal was gepostet - das lässt sich z.B. mit Javascript umsetzen, aber es gibt glaube ich auch inzwischen mit HTML5 und display:table oder ähnlichem Möglichkeiten, das ohne JS hinzubekommen.

Wenn das Template selbst kein Grid hat, musst Du entweder selbst mit widths und floats und media queries herumbasteln (-> entspr. Klassen ins Template-Stylesheet schreiben) oder Du lädst auf den OfA-Seiten ein zusätzliches, einfaches Gridsystem wie z.B. Gridism.

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

tombal

Member

Re: Responsives Design

Danke für die schnelle Antwort. Ich verwende das Template "lesefaken" mit OfA. Die datei gridism.css habe ich im gleichen Verzeichnis wie die template.css gespeichert. Ich bin im Thema noch sehr unbeholfen und die weitere Vorgehensweise erschließt sich noch nicht. Vielleicht kann hierzu jemand weiterhelfen mit 1, 2 ...Tips. Danke im voraus.

florian

Administrator

Re: Responsives Design

Lesefaken basiert auf Fitgrid. Da brauchst Du Gridism nicht. Probier mal aus, was passiert, wenn Du den oben geposteten Code bei den Seiteneinstellungen für die Übersichtsseite verwendest (vorher Deinen Originalcode irgendwo zwischenspeichern).
Infos und Demos zu Fit(r)grid: https://github.com/wachilt/Fitrgrid

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

tombal

Member

Re: Responsives Design

Danke Florian! Ich habe es ausprobiert. Und...es hat funktioniert. Jetzt sind wie gewünscht 2 Artikel nebeneinander und bei Tablet oder Smartphone wechseln sie untereinander. Es fehlt nur nur die gleiche Höhe (Abschluss oben). Wodurch entsteht der Versatz des rechts positionierten Artikels (Bild ca. 5 mm tiefer)? Wichtig wäre nur der Abschluss oben, dass die Thumbs auf einer Höhe sitzen. Nach unten ergeben sich sowieso verschiedene Abstände durch mal mehr oder weniger Textbeschreibung. Vielleicht hast Du auch hierzu einen entscheidenden Tip.

florian

Administrator

Re: Responsives Design

Kann ich so ohne Zugriff auf die Seite nicht sagen. Eventuell ist da irgendwo ein padding, das dazwischenfunkt, oder auch nur ein Leerschritt/Tab... Tipp: rechte Maustaste, "Untersuchen", in der Browserkonsole dann versuchen, das störende Element zu ermitteln.

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

tombal

Member

Re: Responsives Design

Alles gut! Ich hatte irgendwo ein <br /> zuviel gesetzt. Es ist alles perfekt. Und mein Kunde wird sich am Montag freuen.

florian

Administrator

Re: Responsives Design

Das ist schön.

Last edited by florian (21.03.2020 15:39:19)

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.