WBCE Home | WBCE Hilfe | WBCE Addon Repository | Impressum | Datenschutz

WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 20.03.2020 19:12:19

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.

Offline

#2 20.03.2020 19:37:01

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.

Offline

#3 21.03.2020 13:57:17

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.

Offline

#4 21.03.2020 14:13:45

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

Offline

#5 21.03.2020 16:15:43

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.

Offline

#6 21.03.2020 16:24:40

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.

Offline

Liked by:

tombal

#7 21.03.2020 16:26:51

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.

Offline

#8 21.03.2020 16:28:23

florian
Administrator

Re: Responsives Design

Das ist schön.

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

Offline

Liked by:

tombal

Board footer

Powered by FluxBB

up