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

Solved

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

rodrigosens
Tourist
14 0 1

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.
desktop.jpgmobile.jpgScreen Shot 2023-04-16 at 17.42.06.png

Accepted Solution (1)
PageFly-Victor
Shopify Partner
7865 1786 3110

This is an 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>

View solution in original post

Replies 9 (9)

PageFly-Victor
Shopify Partner
7865 1786 3110

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.

PageFlyVictor_0-1681678632526.png

 

rodrigosens
Tourist
14 0 1

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
Shopify Partner
7865 1786 3110

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
Tourist
14 0 1

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
Shopify Partner
7865 1786 3110

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
Tourist
14 0 1

@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
Shopify Partner
7865 1786 3110

This is an 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
Tourist
14 0 1

@PageFly-Victor It worked! Thanks!

PageFly-Victor
Shopify Partner
7865 1786 3110

You are the most welcome!