(Dawn) How to lessen space between multicolumn text

[pikachu1924]

I've already applied custom CSS to set a 0 column gap, but there's still too much space. Is there a way to reduce it further while maintaining consistent horizontal spacing between all elements? (Preferably code that can be implemented into the multicolumn custom css.)

image for reference

https://imgur.com/a/UHM7aOd

Store info:

site: https://82b027-93.myshopify.com/?_ab=0&_fd=0&_sc=1

code: yowhim

[Huptech-Web · Accepted solution]

Hello! @pikachu1924 Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

#shopify-section-template--15459208495159__multicolumn_NkCd3a .multicolumn-list {
    margin: 0 auto !important;
    column-gap: 0 !important;
    justify-content: center; /* if you need to show multicolumn text left sidethen removed this css */
}
.multicolumn-card__info .rte h2 {
    text-align: center;
}
@media screen and (min-width: 990px) {
    .multicolumn-list.grid--6-col-desktop .grid__item {
        width: calc(10% - var(--grid-desktop-horizontal-spacing)* 5 / 6);
        max-width: calc(10% - var(--grid-desktop-horizontal-spacing)* 5 / 6);
    }
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Thank you 
K.K

[Huptech-Web · Accepted solution]

Hello! @pikachu1924 Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

#shopify-section-template--15459208495159__multicolumn_NkCd3a .multicolumn-list {
    margin: 0 auto !important;
    column-gap: 0 !important;
    justify-content: center; /* if you need to show multicolumn text left sidethen removed this css */
}
.multicolumn-card__info .rte h2 {
    text-align: center;
}
@media screen and (min-width: 990px) {
    .multicolumn-list.grid--6-col-desktop .grid__item {
        width: calc(10% - var(--grid-desktop-horizontal-spacing)* 5 / 6);
        max-width: calc(10% - var(--grid-desktop-horizontal-spacing)* 5 / 6);
    }
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Thank you 
K.K

[pikachu1924]

Hello, thanks for the solution! I have added and edited the code to fit the custom CSS; however, the issue still persists on mobile devices, with too much space between elements. Any ideas on how to fix this?

[Huptech-Web]

"Let me check." @pikachu1924 

[Huptech-Web · Accepted solution]

Hello! @pikachu1924 Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

@media screen and (max-width: 749px) {
.multicolumn-list.slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
    width: auto !important;
}
}

If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Thank you 
K.K

[pikachu1924]

The spacing has been reduced significantly, but there is still some space on the right side of the column element for mobile devices. Is there a way to reduce it even further?

[Huptech-Web]

Hello! @pikachu1924 Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

@media screen and (max-width: 749px) {
    #shopify-section-template--15459208495159__multicolumn_NkCd3a .multicolumn-list.slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item {
        min-width: fit-content;
    }
}
.multicolumn .slider-mobile-gutter .slider-buttons {
    display: none !important;
}

 If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.
Thank you 
K.K