Solved

How can I adjust the column gap in a multicolumn section?

cdgerard
Shopify Partner
43 2 3

Hi! 

 

[Multicolumn section on home page / Dawn theme ]

 

Could someone please help me to find a way to narrow the gap in the column as noted in yellow highlight in the screengrab.  So that the image and the title below it are in line with the main menu.

Is it the image wrapper that needs adjusting?

 

Thanks in advance!

 

 

multicolumn-border.png

Accepted Solutions (3)

cdgerard
Shopify Partner
43 2 3

This is an accepted solution.

Another image to help you understand:

 

columngrab2.png

View solution in original post

Vinsinfo
Shopify Partner
265 96 87

This is an accepted solution.

@cdgerard 

Please follow below steps to adjust the space in multicolumn. Let me know whether it is helpful for you.
 
1. From admin, go to "Online Store" -> "Themes" -> "Customize".
2. Click "Multicolumn" section.
Vinsinfo_2-1713251266149.png
3. Paste the below code in "Custom CSS" field as shown in the below screenshot.

 

.multicolumn-card__image-wrapper {
    margin: 0px !important;
}
.multicolumn-card__info {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

Vinsinfo_1-1713251253776.png

 

 

Now, it will be shown like below image,

Vinsinfo_0-1713250672068.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

View solution in original post

cdgerard
Shopify Partner
43 2 3

This is an accepted solution.

Works perfect, thanks a lot!

View solution in original post

Replies 3 (3)

cdgerard
Shopify Partner
43 2 3

This is an accepted solution.

Another image to help you understand:

 

columngrab2.png

Vinsinfo
Shopify Partner
265 96 87

This is an accepted solution.

@cdgerard 

Please follow below steps to adjust the space in multicolumn. Let me know whether it is helpful for you.
 
1. From admin, go to "Online Store" -> "Themes" -> "Customize".
2. Click "Multicolumn" section.
Vinsinfo_2-1713251266149.png
3. Paste the below code in "Custom CSS" field as shown in the below screenshot.

 

.multicolumn-card__image-wrapper {
    margin: 0px !important;
}
.multicolumn-card__info {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

Vinsinfo_1-1713251253776.png

 

 

Now, it will be shown like below image,

Vinsinfo_0-1713250672068.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
cdgerard
Shopify Partner
43 2 3

This is an accepted solution.

Works perfect, thanks a lot!