fix(andreknie.de): keep testimonial carousel centered

This commit is contained in:
2026-07-27 19:48:29 +02:00
parent cfbd77a1a4
commit 772a63c622
2 changed files with 73 additions and 31 deletions
@@ -35,7 +35,8 @@
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
gap: 24px;
padding-bottom: 32px; /* Space for scrollbar and shadow */
padding: 0 calc((100% - min(100%, var(--container-max))) / 2) 32px;
scroll-padding-inline: calc((100% - 88%) / 2);
cursor: grab;
user-select: none;
@@ -57,7 +58,7 @@
.testimonial-card {
/* On mobile, show ~85% width so the next card peeks in */
flex: 0 0 calc(88% - 24px);
scroll-snap-align: start;
scroll-snap-align: center;
/* Equal heights trick: cards stretch to the tallest sibling */
display: flex;
@@ -70,6 +71,10 @@
}
@media (min-width: 768px) {
.testimonial-scroll-container {
scroll-padding-inline: calc((100% - 60%) / 2);
}
.testimonial-card {
/* On tablet, show ~60% width */
flex: 0 0 calc(60% - 24px);
@@ -77,6 +82,10 @@
}
@media (min-width: 1024px) {
.testimonial-scroll-container {
scroll-padding-inline: calc((100% - 45%) / 2);
}
.testimonial-card {
/* On desktop, show ~45% width */
flex: 0 0 calc(45% - 24px);