Multi Column customization

[NOT1]

How to remove multi column left and right padding for mobile? (DAWN)

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @NOT1 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<style>
@media screen and (max-width: 749px) {
    .multicolumn-list:not(.slider) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSSCommerce-B2B · Accepted solution]

@NOT1 ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
@media screen and (max-width: 749px) {
    .multicolumn-list:not(.slider) {
        padding-left: 0px!important;
        padding-right: 0px!important;
    }
}
</style>

Result: 

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (max-width: 749px) {
    .multicolumn-list:not(.slider) {
        padding: 0 !important;
    }
}
</style>

Hope this can help you,

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

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @NOT1 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<style>
@media screen and (max-width: 749px) {
    .multicolumn-list:not(.slider) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSSCommerce-B2B · Accepted solution]

@NOT1 ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
@media screen and (max-width: 749px) {
    .multicolumn-list:not(.slider) {
        padding-left: 0px!important;
        padding-right: 0px!important;
    }
}
</style>

Result: 

[BSSCommerce-HDL · Accepted solution]

Hi @NOT1, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (max-width: 749px) {
    .multicolumn-list:not(.slider) {
        padding: 0 !important;
    }
}
</style>

Hope this can help you,

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

[NOT1]

@BSSCommerce-HDL  @BSSCommerce-B2B @BSS-TekLabs Hey thank you guys for your replies I have another problem how can I increase the vertical space? between the culomns

[BSSCommerce-B2B · Accepted solution]

@NOT1 , add  more this code

<style>
@media only screen and (max-width: 749px) {
    .multicolumn-list {
        gap: 20px!important;
    }
}
</style>

Result