How to Adjust Width of Section

[cascadeironco]

Hi, 

I added a few sections to our product pages but they are much wider than the other sections on the page. I don't see options for adjusting this within the section customization.  Is there custom css code I can add? See attached screenshot. 

Appreciate any help! 

- Allisa

[Natasha-Saed]

Hi,

What theme you are using I guess you need to change from full width to boxed layout if it is available on your theme, if not we can add a small code to these sections to give them padding from the sides.

[cascadeironco]

Hi! We're using Dawn theme.  www.cascadeironco.com

[LizHoang]

Hi @cascadeironco, thanks for reaching out. 

To assist you further, could you kindly share your store URL? 

Thanks for your cooperation in this matter, and look forward to hearing from you.

Liz

[Laza_Binaery]

Hi @cascadeironco 

As you are using the Dawn theme in Theme setting > Layout you can set the global page with, currently it is 220rem or 2200px. On the main product section, you have set a width of 1500px, most likely in the code. So one way to make other sections the same width is following CSS:

@media screen and (min-width: 750px) {
    body.template-product .content-for-layout .page-width, body.template-product .content-for-layout .page-width-desktop {
        width: 150rem;
    }
}

By the way, the store does look very good and it is noticeable that there was a lot of hard work put into it. I was surprised to see Dawn is the base theme.

[cascadeironco]

Hi Laza,

Thank you so much, we've put alot of work into and had some customizations done. For the CSS code you suggest, would I put that in the custom CSS code on the product template? Appreciate your feedback. - Allisa

 

[Made4uo-Ribe]

Hi @cascadeironco 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes"
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

<style>
.shopify-section.section .page-width {
    max-width: 1500px
}
</style>

• And SaVE. 
• Result:
• 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[cascadeironco]

Thank  you! Looks easy enough but I'm not able to find a clear body tag. This is the closest I can find, would you suggest inserting it before this? 

[Made4uo-Ribe]

This is on the very last last line on this file. 

Scroll all the way down. 

You will see the </body>

the looks would be something like this. 

And Save. 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[DaisyVo · Accepted solution]

Hi @cascadeironco ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

.page-width {
    max-width: 1500px !important;
}

Here is the result:

Please let me know if it works!

Best,

Daisy

[LizHoang]

Hi @cascadeironco, 

To address the issue, please help me go to the Shopify admin > Online store > Customize > Theme settings > Custom CSS and insert the following custom code: 

@media screen and (min-width: 750px) {
    .page-width {
        max-width: 1500px !important;
    }
}

I hope my solution is helpful to you.

Liz