Remove padding/ margin in collection page on Brooklyn

[Moosha]

Hi there,

I’m using Brooklyn theme and am looking for some help to remove the excess space on either side of the collection. See below

I also want to rearrange the product photos to a more flowing, tessellating grid such as these examples below.

Happy to do the coding myself too if someone could tell me what to change.

Thanks a mill

[dmwwebartisan]

@Moosha

Please share your store URL.

[Kinjaldavra]

hello @Moosha

Please share your store URL.

[Moosha]

https://melanie-valentine.myshopify.com/

[Kinjaldavra]

hello @Moosha

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.template-collection .wrapper{
        max-width: 100%;
        margin: 0 auto;
    }
    #shopify-section-collection-template .grid__item .product--wrapper{
        max-width: 100%;
    }
    #shopify-section-collection-template .grid-uniform   .grid__item .product--wrapper .product--image {
        max-width: 100%;
        max-height: 100%;
    }

[Zworthkey]

@Moosha
Add this code to timber.scss

.wrapper {
    max-width: 100% !important;
    margin: 0 auto;
    padding: 0 15px;
}

Thank you.

[Moosha]

Brilliant thank you. Is there a way to get the product images so that the are all the same height. For example the horizontal images are a lot smaller and I want to make them the same height as the portrait orientated images.

Currently like this >

Want it to be uniform in height like below >

Thanking you

[Kinjaldavra]

hello @Moosha

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#shopify-section-collection-template .grid__item .product--wrapper{
        min-height: 661px;
    }
    #shopify-section-collection-template .grid-uniform   .grid__item .product--wrapper .product--image {
        min-height: 661px;
    }

[Moosha]

Unfortunately this crops and stretches the product image as you can see below.

I don’t want to crop or distort the image (I want the aspect ratio to remain the same). Trying to achieve this kind of look below

[Zworthkey]

use proper image size.