Adjust Page width & margin Dawn Theme

[Fukuro]

Hi everyone,

I am a beginner in using shopify and building websites and currently struggle getting the widht right.

I tried putting the code in the end of the base.css section first, however it ended up working well only for some pages while other still were messed up. Also when doing this, the margin in mobile-view were to big.

.page-width {
    max-width: 100% !important;
}

It seems like something is off somewhere and I might have messed it up myself tbh.

I would greatly appreciate your help with this.

Website adress is https://fukuroandfriends.com/

PW: HLD2K31

[BSSCommerce-HDL]

Hi @Fukuro

Its seem to be fixed right?

Do you have any problem else?

[Fukuro]

No I have undone the css code, because it messed everything up. So now it is basically as it was before. But if you check the other pages, you will see that there the margins are too big on mobile view.

So basically the challenge is this:

1. I want every page to have the same width

2. On mobile view, all pages should be like this:

[BSSCommerce-HDL]

You can try following these steps to fix on mobile view:
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

If the space still too big, you can decrease “10px” from code above to smaller.

Hope this can help you, If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[Fukuro]

Hi!

That worked out well, thank you so much! I also added the code in the base.css

.page-width {
    max-width: 100% !important;
}

However, I still have the issue that the pages are all misaligned:

Ideally all pages should be like the about us page and contet should start after the red line:

However this is how it looks on the other pages:

contact page

Start page:

And also the other page (Kollektion) and its sub-pages.

What do I need to fix, to have it all aligned perfectly? Thanks in advance!

[BSSCommerce-HDL]

You can try add this code before tag “” as previous:

@media screen and (min-width: 780px) {
 .content-for-layout.focus-none {
    padding: 0 122px 0 122px!important
}

Tell me if that work or you need anything else

[Fukuro]

Thanks, I think the confusion came with the box itself having a different configuration. I will check again and see if I can get it fixed with playing around with custom css in the editor. Thanks!

[BSSCommerce-HDL]

You’re welcome. Have a good day!

[mt686]

@Fukuro

Hi everyone,

I am a beginner in using shopify and building websites and currently struggle getting the widht right.

I tried putting the code in the end of the base.css section first, however it ended up working well only for some pages while other still were messed up. Also when doing this, the margin in mobile-view were to big.

.page-width {
    max-width: 100% !important;
}

It seems like something is off somewhere and I might have messed it up myself tbh.

I would greatly appreciate your help with this.

Website adress is https://fukuroandfriends.com/

PW: HLD2K31

If that .page-width override is only working on some pages, it’s usually because Dawn (and most modern Shopify themes) use multiple wrappers depending on the template. Some pages use .page-width, others use .content-container, .section, or even inline container styles inside specific sections.

Because of that, a global max-width: 100% !important; often creates exactly what you’re seeing — random pages breaking, mobile spacing getting weird, etc.

A safer approach is to target only the specific templates or sections that feel too narrow, for example:

.template-collection .page-width,
.template-product .page-width {
  max-width: 1200px; /* or whatever size feels right */
  margin: 0 auto;
}

Or, if it’s part of a single section:

#shopify-section-template--XXXXXXX .page-width {
  max-width: 1200px;
}

(You can inspect the page, grab the section ID, and keep the change isolated so nothing else breaks.)

If you’d rather skip hunting down wrapper classes, my app EasyEdits lets you visually widen or shrink specific pages/sections without touching any CSS. You can make the tweak once and preview it safely without affecting the rest of your theme.

Full disclosure: I’m the developer of EasyEdits — happy to answer questions or even point you to the exact section ID if you want.

Best of luck!