(Craft Theme) Space between modules and images do not match (desktop and mobile)

[rodrigosens]

I have two collage modules on my homepage, one with only one image and the other one with 3 images. I'm struggling to make the space between the collages the exactly same as between the images on the second block, on desktop and mobile. When I set the space to match on the desktop it doesn't match on mobile. And, for some reason, even when I set the same number on vertical and horizontal space, they don't match.

[PageFly-Victor]

Hi @rodrigosens ,

This is Victor from PageFly - Landing page builder

After visiting your website, it seems that on mobile, the vertical spacing is the same.

[rodrigosens]

hey @PageFly-Victor , sorry, i didn't update the layout. Check it out now. On mobile, the first image has a bigger space than the others.

http://sewe.studio
password: tahrti

[PageFly-Victor]

Hi @rodrigosens ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store -> Theme -> Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before </body> :

<style>
@media (max-width: 750px){
section#shopify-section-template--17751394615595__0d33f6d4-243b-42f5-9971-91c2623aff9f {
    margin-top: 12px
}
}
</style>

Hope my answer will help you.

Best regards,

Victor | PageFly

[rodrigosens]

Hey @PageFly-Victor , it worked!

I just duplicated the first image and the space between this new one and the old one is different again. Do you think there is a way to keep the same space, no matter how much collages/images I have?

[PageFly-Victor]

I think it's possible, you can try with my code below. It's set your margin for each section 12px fixed

<style>
.section+.section {
    margin-top: 12px !important
}
</style>

[rodrigosens]

@PageFly-Victor I set it 24px, It's working, but on desktop only. On mobile the margin between images from the same collage are different.  😞

[PageFly-Victor · Accepted solution]

@rodrigosens , For mobile version you can try again with this code below:

<style>
@media (max-width: 750px){
.section+.section {
    margin-top: 12px !important
}
}
</style>

[rodrigosens]

@PageFly-Victor It worked! Thanks!

[PageFly-Victor]

You are the most welcome!