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!
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!
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.
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?
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.
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
![]()
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;
}