How to Adjust Width of Section

Store Design
,
1

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!

2

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.

3

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

4

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.

5

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 tag and paste the code below before the tag.

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

6

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

Screenshot 2024-12-29 at 2.48.40 PM.png
Screenshot 2024-12-29 at 2.48.40 PM.png1264×1644 163 KB

7

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?

Screenshot 2024-12-29 at 2.54.53 PM.png
Screenshot 2024-12-29 at 2.54.53 PM.png2494×608 124 KB

8

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

9

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

Made4uoRibe_0-1735513153510.png
Made4uoRibe_0-1735513153510.png1575×147 5.4 KB

Scroll all the way down.

You will see the

the looks would be something like this.

Made4uoRibe_1-1735513237595.png
Made4uoRibe_1-1735513237595.png652×174 5.58 KB

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!

10

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:

DaisyVo_0-1735523120737.png
DaisyVo_0-1735523120737.png1851×824 204 KB

Please let me know if it works!

Best,

Daisy

11

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