How to reduce padding in gallery for envy theme?

Store Design
, ,
1

I have 3 galleries on my homepage. On desktop there are 4 columns on mobile there are 2. I want to reduce the padding in-between each gallery.

Thanks

2

Hey @jenbourge

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

https://qnbbkxzzc8oow491-8947528.shopifypreview.com

1 Like
4

Hello @jenbourge , Please make changes in CSS which I put in the code below.

.shopify-section .homepage-sections-wrapper,.shopify-section .homepage-sections-wrapper--white {
    padding: 50px 0; /* remove or comment this css from this */
    padding: 16px 0; /* add this css */
}

This will look like the screenshot below.

Darshanp712_0-1718192964618.png
Darshanp712_0-1718192964618.png1844×959 272 KB

For the mobile view make changes as per the code below.

@media screen and (max-width: 768px) {
    .image-bar>div:last-child {
        margin-bottom: 3rem; /* remove or comment this code */
        margin-bottom: 28px; /* add this code */
    }
    .shopify-section .homepage-sections-wrapper, 
    .shopify-section .homepage-sections-wrapper--white{
       padding: 0px 0px;
   }
}

it will look a like the screenshot below.

Darshanp712_0-1718194051357.png
Darshanp712_0-1718194051357.png462×829 198 KB

Feel free to reach out if you have any questions or need assistance.

5

Hey @jenbourge

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1718194250649.png
Moeed_0-1718194250649.png963×733 664 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

6

Thanks so much this has worked on desktop. WOuld you be able to send code and where to insert to make this change on mobile also?

Thanks

7

Hello @jenbourge , Please check in my reply.

8

Hi, this has not worked. Am i copying exactly as it is and pasting at the bottom of theme.css?

9

Hello @jenbourge , Yes do that. If still not working then put !important at the end of your CSS properties.

10

Hi, this is still not changing for mobile. Is there anything else i should try?

Thanks