How can I adjust image spacing on my main page?

Store Design
1

hi, is there a way to space out the images on my main page so that they are aligned the same?
https://lesbrons.com/
the top 2 images has a space between thats bigger than the bottom 2 and i cant work out why

2

@lesbrons - add this css to the very end of your stylesheet.css file and check

#shopify-section-1561574067213 .homepage-gallery-1561574067213 .homepage-promo{width: 50%;    margin: 0;    padding: var(--focus-border-weight) 10px 0;}
3

thank you so much! that worked perfectly on desktop, but the gaps on mobile viewing still have different space, do you know how to fix this?

4

@lesbrons - please remove last code line and add this

#shopify-section-1561574067213 .homepage-gallery-1561574067213 .homepage-promo{padding: var(--focus-border-weight) 10px 0;}

@media screen and (min-width:750px){
#shopify-section-1561574067213 .homepage-gallery-1561574067213 .homepage-promo{width: 50%;    margin: 0;}
}
1 Like
5

that worked, thank you so much!

6

actually i just noticed on mobile viewing that it has made the page wider, so that you have to scroll side to side to view all of the page. is there a way to make both gaps on mobile smaller to stop this from happening? i tried playing around with the code you gave me but couldnt work it out

7

@lesbrons - where exactly? I do not see scroll

8

hmm it seems to have disappeared on my phone now, really weird.

anyway, its all good now :slightly_smiling_face: