Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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>
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.
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
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
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?
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>
@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. 😞
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>
You are the most welcome!
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024