How can I fix spacing issues on my Flow Theme home page?

[TylerJ]

I’m having (2) issues with spacing on my site.

1. I have a featured collection, and the spacing beneath my product description is very large. How do I shrink the gap of space?

2. Similar issue - I have a gallery and I want to shrink the size of the white border or be able to make my image larger

[David_SHT]

hi @TylerJ

This is David at SalesHunterThemes.

Thank you for your question.

Please share your store URL, page URL and also password (if your store has one) so we can help you.

[TylerJ]

etrnldesigns.com

PW: LIGHTWEIGHT

[ZenoPageBuilder]

Hello @TylerJ

Inside Shopify Admin, you can go to Edit theme code, open file custom.css and add this code at the bottom

.homepage-product-grid-wrapper .grid__item {
    margin-bottom: 0 !important;
}

.image-gallery-wrapper .wrapper {
    padding: 0 15px !important;
}

Hope it helps!

[ZestardTech]

Hello there,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme-index.min.css and paste this at the bottom of the file:

.homepage-sections-wrapper.homepage-sections-wrapper--white {
    padding-bottom: 0;
}
.homepage-product-grid-wrapper .grid__item {
    margin-bottom: 0;
}

[oscprofessional]

Hello @TylerJ

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme-index.min.css>Add this code at the bottom.

.homepage-product-grid-wrapper .grid__item {
    margin-bottom: 0px !important;
}

[TylerJ]

Thank you! That worked!

Another issue on the second item. The top and bottom css worked, but I want to adjust the image so both gallery images aren’t touching + the padding is equal all around both images. I attached an example!

My Site

Example

[oscprofessional]

Hello @TylerJ

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme-index.min.css>Add this code at the bottom.

.image-gallery-wrapper .keep-spacing .homepage-gallery-grid-item {
    padding-left: 0px !important;
}

[TylerJ]

That didn’t work!

Another way to look at it - I need the gallery images to be pushed out wider so it aligns with my product images

[oscprofessional]

Hello @TylerJ

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme-index.min.css>Add this code at the bottom.

.image-gallery-wrapper .keep-spacing .homepage-gallery-grid-item {
  padding: 0px !important
}

[TylerJ]

Thanks!

[TylerJ]

How do I remove padding from specific sides of each image?

On the left image, I want to remove padding on the right side.

On the right image, I want to remove padding on the left side.

The middle where both images touch is too thick

[oscprofessional]

Hello @TylerJ

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme-index.min.css>Add this code at the bottom.

.image-gallery-wrapper .remove-spacing .homepage-gallery-grid-item {
    padding: 2px !important;
}

[TylerJ]

Thank you! This worked perfectly!

[TylerJ]

Not sure why this is happening. After entering the code, the gallery images have shifted to the left on mobile and desktop. How do I fix that?