Decrease padding on multicolumn section

hauteusc
Tourist
5 0 1

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?

Replies 10 (10)
Zworthkey
Shopify Partner
5581 640 1498

@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.

If helpful, please Like and Accept Solution. Hire Us |
if you Want to modify or Customize your theme | Whatsapp | Email us: sales@zworthkey.com
Top Rated Shopify Agency, | We have Over 200+ Happy merchants.
Build Successful Shopify Stores with GemPages
hauteusc
Tourist
5 0 1

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

hauteusc
Tourist
5 0 1
smj_90
Shopify Partner
37 1 6

@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 custome.png

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
BinalSavani
Shopify Partner
360 48 83

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

Binal Savani | iCart App


- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
- To learn more visit www.identixweb.com
AvadaCommerce
Shopify Partner
3065 700 571

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.

AVADA - Top Rated App for Email, SMS, Popups


Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE

DipenPanchal
Shopify Partner
165 47 55

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

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge
hauteusc
Tourist
5 0 1

@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
Tourist
5 0 1

@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
Shopify Partner
165 47 55

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

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge