Stacking product pictures on top of each other with minimal margins/padding - Dawn Theme

Store Design
, , , ,
1

Dear community!

I would like for my product page to have the pictures stacked on top of each other with the same size and minimal padding and margins - examples - https://thegarmentcopenhagen.com/product/madison-dress-black-6/?attribute_pa_size=6 and https://www.bymalenebirger.com/ro/en/ready-to-wear/coats-jackets/alaya-trench-coat/1033311EC.html.

Is it possible to do with code adjustments, or do I need to download a product page customization app - If so, do you have a recommandation?

Website - maisonmagdalena.com

Password - MaisonMagdalena.222

Thanks in advance :blush:

2

Hi @MagdalenaBB

You can try this small CSS code change, in your assets/section-main-product.css file. Find

@media screen and (min-width: 990px) {
    .product--stacked .product__media-item {
        max-width:calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
    }

and change to

@media screen and (min-width: 990px) {
    .product--stacked .product__media-item {
        width: 100%;
        max-width: 100%;
    }
    .product--stacked .product__media-list {
        gap: 0.5rem;
    }

That should make them full-width and reduce the gap.

1 Like
3

Worked perfectly! Thanks.

1 Like