Making "Multi-Row" section full width on Trade Theme

[letsgetwasted]

Hi,

I’d like to make the “Multi-Row” sections in the Trade Theme full width, instead of with paddings on both sides please!

Example in site under Projects > Retail

Thank you

Shopify URL: https://65a186-44.myshopify.com/

Password: meerew

[Made4uo-Ribe]

Hi @letsgetwasted

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.multirow__inner.page-width {
    max-width: 100%;
}
@media screen and (min-width: 989px){
.collapse-padding .image-with-text__grid--reverse .image-with-text__content:not(.image-with-text__content--desktop-center) {
        padding-left: 7rem; 
    }
}
@media screen and (max-width: 988px){
.collapse-padding .image-with-text__grid--reverse .image-with-text__content:not(.image-with-text__content--desktop-center) {
    padding-left: 4rem;
}
    }
@media screen and (max-width: 749px){
.collapse-padding .image-with-text__grid .image-with-text__content {
    padding: 2rem;
}
    }

And save.

Result:

I also fix you padding-left.

If you dont want it then just add this code.

.multirow__inner.page-width {
    max-width: 100%;
}

And Save.

For the full width only.

[Vinsinfo]

@letsgetwasted Please find below the steps to make “Multi-Row” section full width on trade theme. Let me know whether it is helpful for you.

1. From admin, go to “Online Store” → “Themes”.
2. Click action button from the current theme and select “Edit code”.
3. Go to “component-image-with-text.css” file and paste the below code at the bottom of the file as like in the screenshot and save changes.

.shopify-section .multirow .multirow__inner {
  max-width: 100%;
}

Result will be like,

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.

[BSS-TekLabs]

• Here is the solution for you

• Please follow these steps:

• Then find the base.css file.

• Then add the following code:

.multirow .multirow__inner {
    width: 100%;
    margin: 0;
    max-width: 100%;
}

• Then press ‘Save’ to save the code.

• Here is the result you will achieve:

• Good luck. Please press like and mark it as the solution if you find it helpful.

[letsgetwasted]

Awesome, this solved it perfectly fixing the padding on the left too thank you!