diff --git a/assets/carousel.css b/assets/carousel.css index d3efeb2..df4eefa 100644 --- a/assets/carousel.css +++ b/assets/carousel.css @@ -1,14 +1,15 @@ .carousel { height: 100%; - width: calc(100% + 2 * var(--horizontal-padding)); - margin: 0 calc(-1 * var(--horizontal-padding)); + width: calc(100% + 2 * var(--horizontal-padding-mobile)); + margin: 0 calc(-1 * var(--horizontal-padding-mobile)); + padding: 12px 0 0; position: relative; contain: content; /* Performance: Reduces the scope of layout recalculations */ } .carousel__wrapper { height: 100%; - padding: 0 var(--horizontal-padding); + padding: 0 var(--horizontal-padding-mobile); display: flex; gap: 16px; align-items: stretch; @@ -39,7 +40,7 @@ right: 0; bottom: 0; display: flex; - margin: 0 calc(var(--horizontal-padding) - 4px); + margin: 0 calc(var(--horizontal-padding-mobile) - 4px); z-index: 2; } @@ -83,7 +84,7 @@ position: absolute; left: 0; bottom: 0; - margin: 0 calc(var(--horizontal-padding) - 8px); + margin: 0 calc(var(--horizontal-padding-mobile) - 8px); display: flex; z-index: 2; } @@ -127,10 +128,27 @@ } @media (min-width: 992px) { + .carousel { + width: calc(100% + 2 * var(--horizontal-padding)); + margin: 0 calc(-1 * var(--horizontal-padding)); + } + + .carousel__wrapper { + padding: 0 var(--horizontal-padding); + } + .carousel__item { min-width: var(--slide-width); max-width: var(--slide-width); } + + .carousel__navigation { + margin: 0 calc(var(--horizontal-padding) - 8px); + } + + .carousel__pagination { + margin: 0 calc(var(--horizontal-padding) - 4px); + } } @media (min-width: 1200px) { diff --git a/assets/testimonials.css b/assets/testimonials.css index b06cc32..8064eb1 100644 --- a/assets/testimonials.css +++ b/assets/testimonials.css @@ -11,7 +11,7 @@ } .testimonials__side { - margin: 0 0 50px; + margin: 0 0 38px; } .testimonials__bg-image-holder { @@ -31,7 +31,6 @@ flex-direction: column; align-items: flex-start; border-radius: var(--border-radius-rounded-blocks); - overflow: hidden; color: var(--color-accent); background: var(--background-accent); } @@ -99,9 +98,6 @@ background: var(--background-primary-hover); } -.testimonials__side + .carousel .carousel__list { - padding: 12px 0; -} @media (min-width: 992px) { .testimonials__wrapper--padding-top { @@ -121,7 +117,7 @@ flex: 0 0 calc(var(--title-max-width) + 32px); max-width: calc(var(--title-max-width) + 32px); padding: 0 32px 0 0; - margin: 12px 0; + margin: 12px 0 0; border-right: 1px solid var(--background-accent); } @@ -175,13 +171,12 @@ } .testimonials__side + .carousel .carousel__list { - overflow-x: scroll; - overflow-y: hidden; + overflow-x: clip; } .testimonials__side + .carousel .carousel__navigation { left: calc(-1 * var(--title-max-width) - var(--carousel-indent) * 2); - bottom: 12px; + bottom: 0; margin: 0; } } diff --git a/sections/products.liquid b/sections/products.liquid index dbc3e10..ec474e8 100644 --- a/sections/products.liquid +++ b/sections/products.liquid @@ -142,23 +142,18 @@ {% assign product = item %} {% endcase %} - {%- if carousel -%} -
{{- description -}} diff --git a/snippets/product-card.liquid b/snippets/product-card.liquid index cdf7994..2d75341 100644 --- a/snippets/product-card.liquid +++ b/snippets/product-card.liquid @@ -18,7 +18,6 @@ {%- assign border = settings.card_borders -%} {%- assign color_scheme = settings.card_color_scheme -%} {%- assign excerpt = "" -%} -{%- assign id = "" -%} {%- assign image = "" -%} {%- assign image_bg = settings.card_image_background -%} {%- assign image_fit = settings.card_image_fit -%} @@ -50,7 +49,6 @@ {%- assign points = image.coordinates -%} {%- endif -%} - {%- assign id = product.id -%} {%- assign url = product.url -%} {%- assign name = product.name -%} {%- assign excerpt = product.excerpt -%} @@ -91,7 +89,7 @@ {%- endcapture -%} {% comment %} CSS variables end {% endcomment %} -+{%- if image.url != blank -%} {%- render 'image',