fix(andreknie.de): keep testimonial carousel centered
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user