Remove Gap Between Column in Multicolumn Section

Hi!

I want to remove the gap between columns. As you can see in the shared image, the gap which I indicated in the red arrows format that needs to be removed in the Multicolumn Section.

Kindly remove that Gap.

Thanks!

1 Like

Hi @Mariana-Civeira , Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

Sure,

https://36cab0-78.myshopify.com/

Password:teosti

1 Like

Hi @Mariana-Civeira , I couldn’t find the page you described
Can you kindly share the details of your problem (page link) with us? We will check it and suggest you a solution if possible.

Hi @Mariana-Civeira
I can’t see the multicolumn section on this site. Please share a screenshot with me.

Please check Now

Actually, I forgot to publish the theme. Can you please check now?

1 Like

Hi @Mariana-Civeira

Go to Online Store, then Theme, and click on Edit code.

Locate the file assets/base.css, and paste the code provided below at the end of the file.

.multicolumn-list {
column-gap: 0!important;
row-gap: 0;
}
.background-none .multicolumn-card__image-wrapper {
margin-left: 10px;
margin-right: 10px;
}

A small gap is still present. I want to remove all the gaps between the columns and right and left side gap.

1 Like

Hi @Mariana-Civeira ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file → Save

@media only screen and (min-width: 750px) {
   .background-none .multicolumn-card__image-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .page-width:has(.multicolumn-list) {
        padding: 0 !important;
        max-width: 100% !important;
    }

    .multicolumn-list.grid {
        column-gap: 0 !important;
        row-gap: 0 !important;
    }
    .multicolumn-list .grid__item {
        max-width: 100% !important;
    }
}

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it asa solution. Thank you :heart_eyes: :heart_eyes:

2 Likes

Hi @Mariana-Civeira

Go to Online Store, then Theme, and click on Edit code.

Locate the file assets/base.css, and paste the code provided below at the end of the file.

.page-width.section-template--14919971962926__multicolumn_gNiUGB-padding.isolate.scroll-trigger.animate--slide-in {
width: 100%;
max-width: 100%;
padding: 0;
}
.multicolumn-list {
column-gap: 0!important;
row-gap: 0;
}
.background-none .multicolumn-card__image-wrapper {
margin-left: 1px;
margin-right: 1px;
}
ul#Slider-template--14919971962926__multicolumn_gNiUGB {
text-align: center;
justify-content: center;
}
.multicolumn .title {
text-align: center;
justify-content: center;
margin: 10px auto;
}

1 Like