How can I resize a collage without disturbing the padding?

Store Design
, , ,
1

Hello I recently fixed the padding issue with my collage, however, now my collage is too big. I have attached a version of my collage (the one that is too big). I also attached a version of the collage sizing I am looking for. How would I resize my collage without ruining the padding?

Here are the photos:

https://imgur.com/a/n08aMZL

2

Hi @SamTheMaker ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/collage.css->paste below code at the bottom of the file:

@media screen and (min-width: 750px) {
    .collage {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    }
    .collage__item--left:nth-child(3n - 2) {
        grid-column: 1 !important;
        grid-row: span 2 !important;
    }
    .collage__item--left:nth-child(3n - 1), .collage__item--left:nth-child(3n) {
        grid-column-start: 2 !important;
    }
}

I hope it would help you
Best regards,

Kate | PageFly

3

Hey this helped, but its still too big. How do I make it even smaller. Thanks!

1 Like
4

Hi @SamTheMaker ,

You can try replace previous code by below code in collage.css file:

@media screen and (min-width: 750px) {
    .collage {
        grid-template-columns: repeat(2,minmax(0,1fr)) !important;
        max-width: 1140px;
        margin: 0 auto;
    }
    .collage__item--left:nth-child(3n - 2) {
        grid-column: 1 !important;
        grid-row: span 2 !important;
    }
    .collage__item--left:nth-child(3n - 1), .collage__item--left:nth-child(3n) {
        grid-column-start: 2 !important;
    }
}

NOTE: Attribute: max-width: 1140px; (You can change 1140 to fit your web)

I hope it would help you
Best regards,

Kate | PageFly