Decrease padding on multicolumn section

[hauteusc]

I'm trying to create an image collage using the multicolumn section, however, the images are too spaced apart and I would like to decrease the padding between them. Any tips?

[Zworthkey]

@hauteusc 
Welcome to the Shopify community!
Thanks for your good question.

Please share your store URL.
So that I will check and let you know the exact solution here.

[hauteusc]

@Zworthkey hauteusc.com password is hauteusc - the image gallery is in the lookbook page under the catalog menu

[hauteusc]

@Zworthkey link to the specific page is https://hauteusc.com/pages/spring-2022-lookbook

[smj_90]

@hauteusc 

Hi there,

Go to admin > customizer > theme settings > layout

and decrease the horizontal and vertical spaces to 0.

The spacing will be removed. 

SS attached 

[BinalSavani]

Hello @hauteusc!

Hope you are doing well.

You need to add the CSS to reduce the gap between images, please check this screenshot for better understanding: https://prnt.sc/Hjb4eZmfGjHJ

[AvadaCommerce]

Hi @hauteusc ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/section-lookbook-multicolumn.css->paste below code at the bottom of the file:

#shopify-section-template--14873168969868__1647889721fc3b9d64 .multicolumn-list {
    column-gap: 0 !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

[DipenPanchal]

Hello @hauteusc,

I am happy to help you with decreasing the padding between blocks, I have a solution for that, Please follow the steps as in the video link, I hope it will help you

attached video link : https://nimb.ws/Y2zTeS

- Was your question answered? Mark it as an Accepted Solution

[hauteusc]

@DipenPanchal is there a way to do this without editing all multicolumns globally? I made a new section file in the code for this grid specifically.

[hauteusc]

@smj_90 is there a way to do this without editing all multicolumns globally? I made a new section file in the code for this grid specifically.

[DipenPanchal]

Hello @hauteusc,
Greetings!!

Okay, Have you created a new multicolumn section, Right?
if yes, please follow the below steps or you can see the video for a better understanding

step-1 : You have to add a custom class for all sections that you have created
like this https://prnt.sc/hhqZtJ0cc8XV

step-2 : add this css in your theme css file
/* css for decrese horizontal space*/
#MainContent .section.gallay-section {
margin-top: 10px;
}

/* css for decrese vertical space*/
#MainContent .multicolumn-list {
column-gap: 5px;
}

 I hope it will help you, video: https://watch.screencastify.com/v/6nZvMGJQURruZ8mgP2zA

Let me know if any queries or doubts with this 🙂

- Was your question answered? Mark it as an Accepted Solution