Spaltenbreite und Mobile Version

rummy

Hallo zusammen,

auf meiner Webseite benutze ich das Widget Linkbox um auf der Startseite mittels Icons direkt auf die Inhalte zu verlinken. Die Linkbox lässt sich einerseits nicht kleiner als zwei Spalten machen, was in der Desktopansicht eigentlich schon zu groß ist, aber gerade noch akzeptiert werden kann. Allerdings nimmt in der Mobilen Hochkant-Version die Linkbox die gesamte Breite des Bildschirms ein. Das sieht sieht absolut unbrauchbar aus. Ich benötige hier dringend eine Lösung, wie ich wenigstens zwei Linkboxen nebeneinander anzeigen kann. Gerne auch mit anderen Widgets, CSS...

Ich benutze:
Zeta 17.2.5
Stripe Responsive
Seite https://www.tsv-heising.de

Ich bin für jede Hilfe dankbar

Gruß Rummy

aws

schau dir den Code an, packe ihn auf der Startseite in ein Zeta Quelltext Widget!

Gruß

Armin

Bitte nicht so verwenden [ZP Support]

Hinweis:
- Bild-Pfade (oid://image/...) bitte durch die echten Bild-Verweise ersetzen.
- Seitenlinks (oid://page/de$...) bitte durch die echten Seitennamen ersetzen.
Bild (Handy Hochformat)

.tsvh-wrap {
box-sizing: border-box !important;
width: 100% !important;
max-width: 1280px !important;
margin: 0 auto !important;
padding: 24px 16px !important;
background: #eaf6ff !important;
}

.tsvh-wrap *,
.tsvh-wrap *::before,
.tsvh-wrap *::after {
box-sizing: border-box !important;
}

/* Flex statt Grid: ermöglicht zentrierte letzte Reihe */
.tsvh-grid {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 16px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}

.tsvh-item {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
/* 6 Spalten: (100% - 5 Gaps) / 6 */
flex: 0 0 calc((100% - 80px) / 6) !important;
max-width: calc((100% - 80px) / 6) !important;
}

.tsvh-card {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
min-height: 190px !important;
padding: 22px 12px 18px !important;
background: #ffffff !important;
border-radius: 6px !important;
border-bottom: 4px solid transparent !important;
box-shadow: 0 1px 3px rgba(0, 40, 80, 0.08) !important;
text-decoration: none !important;
text-align: center !important;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
-webkit-tap-highlight-color: transparent;
}

.tsvh-card:link,
.tsvh-card:visited {
color: #2b2b2b !important;
text-decoration: none !important;
}

.tsvh-card:hover,
.tsvh-card:focus-visible {
transform: translateY(-5px) !important;
box-shadow: 0 10px 22px rgba(0, 40, 80, 0.16) !important;
border-bottom-color: #0b6fbf !important;
color: #0b6fbf !important;
text-decoration: none !important;
}

.tsvh-card:focus-visible {
outline: 3px solid #0b6fbf !important;
outline-offset: 2px !important;
}

.tsvh-card:active {
transform: translateY(-1px) !important;
}

/* Icon-Bereich mit fester Proportion -> alle Icons wirken gleich groß */
.tsvh-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 110px !important;
margin: 0 0 14px !important;
}

.tsvh-icon img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 100% !important;
margin: 0 auto !important;
transition: transform .25s ease !important;
}

.tsvh-card:hover .tsvh-icon img,
.tsvh-card:focus-visible .tsvh-icon img {
transform: scale(1.07) !important;
}

.tsvh-label {
display: block !important;
margin: 0 !important;
font-size: 20px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
color: inherit !important;
/* Lange Wörter ("Fußball Senioren") sauber umbrechen */
overflow-wrap: break-word !important;
word-wrap: break-word !important;
hyphens: auto !important;
-webkit-hyphens: auto !important;
}

/* ---------- Desktop klein / Tablet quer: < 1100px ---------- */
media (max-width: 1099px) {
.tsvh-item {
/* 4 Spalten */
flex: 0 0 calc((100% - 48px) / 4) !important;
max-width: calc((100% - 48px) / 4) !important;
}
.tsvh-label { font-size: 19px !important; }
}

/* ---------- Tablet hoch / Handy quer: < 768px ---------- */
media (max-width: 767px) {
.tsvh-wrap { padding: 20px 14px !important; }
.tsvh-grid { gap: 14px !important; }
.tsvh-item {
/* 3 Spalten */
flex: 0 0 calc((100% - 28px) / 3) !important;
max-width: calc((100% - 28px) / 3) !important;
}
.tsvh-card { min-height: 170px !important; padding: 18px 10px 16px !important; }
.tsvh-icon { height: 90px !important; margin-bottom: 12px !important; }
.tsvh-label { font-size: 18px !important; }
}

/* ---------- Handy hoch: < 560px -> IMMER 2 Spalten ---------- */
media (max-width: 559px) {
.tsvh-wrap { padding: 14px 10px !important; }
.tsvh-grid { gap: 10px !important; }
.tsvh-item {
flex: 0 0 calc((100% - 10px) / 2) !important;
max-width: calc((100% - 10px) / 2) !important;
}
.tsvh-card { min-height: 150px !important; padding: 14px 8px 14px !important; }
.tsvh-icon { height: 74px !important; margin-bottom: 10px !important; }
.tsvh-label { font-size: 16px !important; }
}

/* ---------- Sehr schmale Handys: < 360px ---------- */
media (max-width: 359px) {
.tsvh-card { min-height: 135px !important; padding: 12px 6px !important; }
.tsvh-icon { height: 62px !important; }
.tsvh-label { font-size: 14px !important; }
}

/* ---------- Handy quer (niedrige Höhe): Kacheln kompakter ---------- */
media (max-height: 480px) and (orientation: landscape) {
.tsvh-card { min-height: 130px !important; }
.tsvh-icon { height: 64px !important; margin-bottom: 8px !important; }
}

/* ---------- Weniger Bewegung gewünscht ---------- */
media (prefers-reduced-motion: reduce) {
.tsvh-card,
.tsvh-icon img { transition: none !important; }
.tsvh-card:hover,
.tsvh-card:focus-visible,
.tsvh-card:hover .tsvh-icon img { transform: none !important; }
}
</style>

<li class="tsvh-item">
<a class="tsvh-card" href="oid://page/de$Badminton">
<img src="oid://image/icon-badminton.png" alt="" loading="lazy">
Badminton
</a>
</li>

<li class="tsvh-item">
<a class="tsvh-card" href="oid://page/de$Basketball">
<img src="oid://image/icon-basketball.png" alt="" loading="lazy">
Basketball
</a>
</li>

<li class="tsvh-item">
<a class="tsvh-card" href="oid://page/de$Ballschule">
<img src="oid://image/icon-ballschule.png" alt="" loading="lazy">
Ballschule
</a>
</li>

<li class="tsvh-item">
<a class="tsvh-card" href="oid://page/de$Fussball-Jugend">
<img src="oid://image/icon-fussball-jugend.png" alt="" loading="lazy">
Fußball Jugend
</a>
</li>

<li class="tsvh-item">
<a class="tsvh-card" href="oid://page/de$Fussball-Senioren">
<img src="oid://image/icon-fussball-senioren.png" alt="" loading="lazy">
Fußball Senioren
</a>
</li>

<li class="tsvh-item">
<a class="tsvh-card" href="oid://page/de$Gymnastik">
<img src="oid://image/icon-gymnastik.png" alt="" loading="lazy">
Gymnastik
</a>
</li>

<li class="tsvh-item">
<a class="tsvh-card" href="oid://page/de$Radsport">
<img src="oid://image/icon-radsport.png" alt="" loading="lazy">
Radsport
</a>
</li>

<li class="tsvh-item">
<a class="tsvh-card" href="oid://page/de$Tennis">
<img src="oid://image/icon-tennis.png" alt="" loading="lazy">
Tennis
</a>
</li>

<li class="tsvh-item">
<a class="tsvh-card" href="oid://page/de$Tischtennis">
<img src="oid://image/icon-tischtennis.png" alt="" loading="lazy">
Tischtennis
</a>
</li>

<li class="tsvh-item">
<a class="tsvh-card" href="oid://page/de$Turnen">
<img src="oid://image/icon-turnen.png" alt="" loading="lazy">
Turnen
</a>
</li>

<li class="tsvh-item">
<a class="tsvh-card" href="oid://page/de$Kurse">
<img src="oid://image/icon-kurse.png" alt="" loading="lazy">
Kurse
</a>
</li>

</ul>
</nav>

Stefan S

Zitat von aws

schau dir den Code an, packe ihn auf der Startseite in ein Zeta Quelltext Widget!

Das geht auch wesentlich einfacher und weniger komplex. Melde mich Montag dazu.

aws

Hallo Stefan,

ich schreibe Ihnen direkt hier im Ticket, weil ich ehrlich gesagt ratlos bin.

Das ist jetzt schon das zweite Mal, dass ich auf "In Moderation" gesetzt wurde. Ich wollte dem User nur helfen – er hat explizit gefragt, ob jemand eine Lösung mit CSS/HTML oder einem anderen Widget hat. Genau dazu habe ich einen passenden Vorschlag gepostet, der technisch auch tadellos funktioniert.

Ich bin hier im Forum wirklich sehr gerne aktiv und helfe weiter (wenn ich kann), aber solche Sperren verunsichern mich total. Wenn an meinem Beitrag irgendwas nicht gepasst hat oder ich gegen eine Regel verstoßen habe, sagen Sie mir das bitte einfach kurz.

Es wäre klasse, wenn Sie mich wieder aus der Vorab-Prüfung nehmen könnten, damit ich hier ganz normal mitmischen kann.

Danke und beste Grüße

Armin

Stefan S

Das nachfolgende CSS stellt die Darstellung von über 2 Grid-Spalten breiten Artikeln so ein, dass auch mobil generell 2 Spalten nebeneinander gezeigt werden.

• Klicken Sie auf "Einstellungen > Einstellungen"
• Klicken Sie auf CSS
• Fügen Sie folgende Textzeilen (ohne Überschrift und ohne Zeilennummern – am besten über das Dokumente-Icon rechts oben im Quellcode-Kasten kopieren) in das Feld "CSS" ein und schließen Sie den Dialog dann mit Klick auf "OK"

CSS

<style>
/* Breakpoint 1-spaltig auf 2-spaltig umbiegen */
/* https://community.zeta-producer.com/thread/21405-spaltenbreite-und-mobile-version/ */
@media (max-width: 479px) {    
    .responsivelayout div.zpRow .zpColumn.c2, 
    .responsivelayout .zpColumnItem.c2, 
    .responsivelayout .zp-form .c2, 
    .responsivelayout .zpgrid .c2:not(.resizablefield){
       /* Breite 50% - zwei Spalten nebeneinander */
       width: 50% !important;
   }
}
</style>

Alles anzeigen

Anschließend müssen Sie evtl. Ihre Seiten neu erstellen (Erweitert > Erstellen > Alle Seiten erstellen) und ggf. veröffentlichen.

Stefan S

Zitat von aws

Es wäre klasse, wenn Sie mich wieder aus der Vorab-Prüfung nehmen könnten, damit ich hier ganz normal mitmischen kann.

Alles Gut! Wir freuen uns ja auch über Ihr Engagement. Machen Sie sich bitte nichts daraus!

Sie können ganz normal mitmischen, nur werden Ihre Beiträge halt nicht sofort sichtbar, sondern erst, wenn wir die Beiträge freigeben.

Manche Lösungen, die hier gepostet werden sind nicht "ideal", können zu Mehraufwand im Support führen oder stören uns anderweitig. Damit wir solche Beiträge identifizieren können, bevor das Kind in den Brunnen gefallen ist, moderieren wir.

aws

Hallo Stefan,

danke für die Erklärung. Ich kann die Sicht vom Support und das Thema Mehraufwand natürlich nachvollziehen.

Trotzdem nimmt das mit der Vorab-Prüfung bei aktiven Usern extrem die Dynamik raus. Wenn man spontan im Forum antworten möchte, ist das einfach sehr zäh und fühlt sich ehrlich gesagt auch wie eine Abstufung an.

Ich dachte eigentlich, dass ich mich an die Regeln und die Netiquette halte und stets freundlich sowie hilfsbereit unterwegs bin. Ich bitte Sie daher, die Moderationssperre bei meinem Account wieder aufzuheben. Falls aus Ihrer Sicht doch mal eine Lösung nicht optimal sein sollte, sagen Sie mir einfach kurz Bescheid – dann passe ich das direkt an.

Danke und viele Grüße

Armin

rummy

Hallo Stefan,

danke für den Support, funktioniert wie gewünscht.
Auch herzlichen Dank an Armin!

Gruß

rummy

Spaltenbreite und Mobile Version

Stefan S 9. Oktober 2026 um 11:18

Jetzt mitmachen!

Ähnliche Themen

Bild Darstellung im Footer Bereich

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?