New Shopify Certification now available: Liquid Storefronts for Theme Developers

How can change the multicolumn width? Sense Theme

Solved
Certa
Excursionist
13 0 2

Hi, 

I'm new to shopify and I'm struggling to get the multicolumn to match the sections above and below.

It did start the full width of the page, but now I've set it to left somehow and can't get it back how it was.

I just need it back to the centre then reduce it's width.

 

If anyone can help it would be appreciated.Screenshot 2023-10-25 205350.png

 

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
4210 974 1184

This is an accepted solution.

Yes it is. Please follow the instructions below

 

  • 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 very bottom of the file, please add the code below, and then SAVE

 

.page-width.section-template--19926961258833__a5e9087d-4a4b-4e84-81a3-790cb46dde6d-padding.isolate.scroll-trigger.animate--slide-in {
    max-width: calc(var(--page-width) - 100px);
    background: var(--gradient-background);
    background-attachment: fixed;
}

.multicolumn.color-scheme-f25c7f13-b11f-4212-bd95-9a0caf040e1a.gradient.background-primary.no-heading {
    background: unset;
    background-attachment: unset;
    display: flex;
    justify-content: center;
    margin: 0 50px;
}


Result: 

Made4uoRibe_0-1698272236892.png

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 6 (6)
Made4uo-Ribe
Shopify Partner
4210 974 1184

Hi @Certa 

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Certa
Excursionist
13 0 2

Hi thanks for your reply.

 

It's https://c52db4-4.myshopify.com/

p/w chiwao

 

Thanks 

Made4uo-Ribe
Shopify Partner
4210 974 1184

Hi @Certa 

 

Thank you for providing the information. The said issue is due to the added code. Please follow the instructions to fix this. 

 

  • 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 very bottom of the file, please delete the highlight code below, and then SAVE

 

#shopify-section-template--19926961258833__a5e9087d-4a4b-4e84-81a3-790cb46dde6d {
  padding: 20% all;
     max-width: 80% !important;
}

 

See image as reference. 

Made4uoRibe_0-1698270149480.png

 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Certa
Excursionist
13 0 2

Hi,

 

Thanks for helping me get it central 🙂

 

I just need to narrow the gold on each side as it's back to it's full width on the page. I want the same size as the section above and below if possible ?

 

Thanks 

Made4uo-Ribe
Shopify Partner
4210 974 1184

This is an accepted solution.

Yes it is. Please follow the instructions below

 

  • 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 very bottom of the file, please add the code below, and then SAVE

 

.page-width.section-template--19926961258833__a5e9087d-4a4b-4e84-81a3-790cb46dde6d-padding.isolate.scroll-trigger.animate--slide-in {
    max-width: calc(var(--page-width) - 100px);
    background: var(--gradient-background);
    background-attachment: fixed;
}

.multicolumn.color-scheme-f25c7f13-b11f-4212-bd95-9a0caf040e1a.gradient.background-primary.no-heading {
    background: unset;
    background-attachment: unset;
    display: flex;
    justify-content: center;
    margin: 0 50px;
}


Result: 

Made4uoRibe_0-1698272236892.png

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


Certa
Excursionist
13 0 2

You're amazing!!

 

Thanks so much 🙂