How to reduce left and right padding of a multi column section in Shopify trade theme?

[dan_mz]

Hi there

I am needing to reduce left and right padding of a multi column section in trade theme, specifically when the browser in is full screen on desktop. There is way too much padding around the multicolumn. Once the screen size is reduced to laptop or tablet, the padding is a more appropriate size. I have tried a fair few variations of the code in the base.css file, however it does not appear to be targeting the section properly. For example this one of the combinations I have tried;

.page-width.section-template--23270256574749__multicolumn_r3xNwK-padding {
padding-left: 10px !important;
padding-right: 10px !important;

}

Some help with this would be great. 

Cheers

Dan 

 

[BSSCommerce-HDL]

Hi @dan_mz , Can you kindly share your store link  with us? We will check it and suggest you a solution if possible.

[dan_mz]

Store link is here https://e687b0-a0.myshopify.com/

Thanks 

[BSSCommerce-HDL]

Hi @dan_mz, Your site has protected password

[dan_mz]

Apologies

Password is: eceyai

[BSSCommerce-HDL · Accepted solution]

Hi @dan_mz, 

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 screen and (min-width: 750px) {
#shopify-section-template--23270256574749__multicolumn_r3xNwK .multicolumn .page-width, #shopify-section-template--23270256574749__multicolumn_r3xNwK .multicolumn .multicolumn-list__item {
    margin: 0 !important;
    max-width: 100% !important;
}

#shopify-section-template--23270256574749__multicolumn_r3xNwK .multicolumn-card__image-wrapper {
   width: 20% !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 😍

[dan_mz]

Thats got it. Thanks!

Is there a way to add this setting globally on all rich text / multicolumn sections?

[niraj_patel]

Hello @dan_mz 

would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

[wo]

There may be a maximum width set. You can add

max-width:1600px !important;