WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

Du bist nicht angemeldet.

#1 20.03.2020 18:12:19

tombal
Mitglied

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 18: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.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#3 21.03.2020 12:57:17

tombal
Mitglied

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 13: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


Code allein macht nicht glücklich. Jetzt spenden!

Offline

#5 21.03.2020 15:15:43

tombal
Mitglied

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 15: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.


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Liked by:

tombal

#7 21.03.2020 15:26:51

tombal
Mitglied

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 15:28:23

florian
Administrator

Re: Responsives Design

Das ist schön.

Beitrag geändert von florian (21.03.2020 15:39:19)


Code allein macht nicht glücklich. Jetzt spenden!

Offline

Liked by:

tombal

Fußzeile des Forums

up