HTML

benutzerdefinierte CSS

1 Header schatten

14 search button

21 languange button

45 glow active page

50 spalten responsive

🧭 ChurchDesk – Dynamic-Content-Widget („Tagesaktuelle Gottesdienstzeiten“)
Ziel
Darstellung des Kalenders mit vollständigen Einträgen (ca. 5) auf allen Geräten, ohne Abschneiden oder übermäßigen Leerraum.

🔹 1. Modulstruktur (Layout im Seiteneditor)
Bereich
Inhalt
Wichtige Einstellung
Spalte (rechts)
Dynamic Content Modul
Type: Ereignisse, Widget: EAE Gottesdienstzeiten
 
HTML-Modul direkt darunter
Enthält das CSS (siehe unten)
Optionale linke Spalte
z. B. Textblock mit „Gottesdienste und Hl. Messen“
keine feste Höhe
Hinweis
Wenn 2-Spalten-Layout verwendet wird: Das HTML-Modul immer in derselben Spalte wie das Dynamic-Content-Modul platzieren.
 

🔹 2. Benutzerdefinierter Selektor
Im Dynamic-Content-Modul unter „Benutzerdefinierter Selektor“
→ Klasse: cc_gdz-times (automatisch vorgegeben, nicht änderbar).
Dadurch kann das CSS gezielt nur dieses Modul ansprechen.

🔹 3. CSS-Code (im HTML-Modul unterhalb des Widgets)
 
<style>
/* verhindert, dass das Widget-Innere abgeschnitten wird */
.cc_gdz-times {
height: auto !important;
overflow: visible !important;
padding-bottom: 8px;
}

/* Laptop/Desktop (ca. 5 Einträge sichtbar) */
.cc_gdz-times iframe {
display: block !important;
width: 100% !important;
border: 0 !important;
overflow: visible !important;
height: 1250px !important;
min-height: 1250px !important;
}

/* Tablet – kompakter (passt genau in mittlere Displays) */
@media (min-width: 768px) and (max-width: 1199px) {
.cc_gdz-times iframe {
height: 1120px !important;
min-height: 1120px !important;
}
}

/* Smartphone – etwas mehr Höhe für Scrollpfeile */
@media (max-width: 767px) {
.cc_gdz-times iframe {
height: 2050px !important;
min-height: 2050px !important;
}
}
</style>

💡
→ Werte können bei Bedarf in 50er-Schritten angepasst werden (z. B. 1250 → 1200 oder → 1300).
→ Immer nach Änderungen: Speichern → Veröffentlichen → Strg + F5.

🔹 4. Optional (wenn du wieder 2-Spalten-Ansicht verwendest)
Für schmalere Spalten kannst du leicht nachregeln:

 
@media (min-width:1200px) {
.zweispaltig .cc_gdz-times iframe {
height:1500px !important;
min-height:1500px !important;
}
}

➡ Nur nötig, wenn du in einer Zeile zwei Spalten hast
und der Dynamic-Content dort zu wenig zeigt.

🔹 5. Warum es funktioniert
ChurchDesk-Dynamic-Content verwendet intern einen iFrame mit fester Höhe,
der sonst in Containern abgeschnitten wird.
Durch den zusätzlichen Selektor & CSS-Override wird diese Höhe überschrieben
→ vollständige Anzeige, responsive und ohne Leerraum.

✅ Endergebnis
Auf Desktop/Laptop: 5 Einträge sichtbar, kompakt, kein Leerraum
Auf Tablet: alle Einträge, angepasst an Bildschirm
Auf Handy: vollständige Liste + Pfeile sichtbar
Keine Darstellungsfehler mehr, auch bei Spalten- oder Layoutwechsel