How to achieve full width on all pages using the Supply theme?

Solved

How to achieve full width on all pages using the Supply theme?

Chirpy
Excursionist
34 0 8

While my main page is full width, all my other pages are centering rather than going full width. I am using the Supply theme.

Thank you in advance!

 


Screenshot 2023-02-23 at 15-08-44 Contact Us.png

 

Accepted Solution (1)

PageFly-Victor
Shopify Partner
7865 1786 3131

This is an accepted solution.

Hi @Chirpy,

 

You can try this code by following these steps: 

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

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file -> Save

.wrapper.main-content>div,.wrapper.main-content>div>div{
width:100% !important;
max-width:100% !important;
left:0 !important
}

PageFlyVictor_0-1677126720035.pngPageFlyVictor_1-1677126768482.png

 



Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

View solution in original post

Replies 4 (4)

infoatcodelab7
Shopify Partner
593 141 156

@Chirpy 

Please share your site URL,
I will check out the issue and provide you a solution here.

Want to modify or develop new website, Hire us.
If helpful then please Like and Accept Solution .
Email: info@codelab7.com
Chirpy
Excursionist
34 0 8

infoatcodelab7
Shopify Partner
593 141 156

@Chirpy 

To make pages full width follow this steps:

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.css and paste this at the bottom of the file:

 

.shopify-policy__container{
  max-width: 100ch;
}

 

Hope this works well

Best Regards !

Want to modify or develop new website, Hire us.
If helpful then please Like and Accept Solution .
Email: info@codelab7.com

PageFly-Victor
Shopify Partner
7865 1786 3131

This is an accepted solution.

Hi @Chirpy,

 

You can try this code by following these steps: 

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

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file -> Save

.wrapper.main-content>div,.wrapper.main-content>div>div{
width:100% !important;
max-width:100% !important;
left:0 !important
}

PageFlyVictor_0-1677126720035.pngPageFlyVictor_1-1677126768482.png

 



Hope my solution works perfectly for you!

Best regards,

Victor | PageFly