I’m using the Dwell theme, but I find the narrow page width too wide.
Is there a way to change Dwell’s code to make every page narrower? Or is there a snippet of code I can put on each page?
You’ll need to override the max-width of the main content container for the Dwell theme. Most Shopify themes use a class like .page-width for this.
Go into your theme code (Online Store → Themes → Actions → Edit code) and look for base.css or theme.css in the Assets folder. Add this CSS snippet to the bottom of that file:
.page-width {
max-width: 1000px; /* Adjust this value to your desired maximum width /
margin: 0 auto; / This keeps it centered */
}
If .page-width doesn’t seem to make a difference, use your browser’s inspector (right-click on the page → Inspect) to find the specific class or ID of the main div that wraps all your page content on the Dwell theme. Replace .page-width in the snippet with that exact selector.
Alternatively, if the Dwell theme has a “Custom CSS” section in the theme editor (Customize → Theme settings → Custom CSS), you can paste the code there, but base.css is generally the more robust place for structural overrides.
Hi @BelgerArts
Try this:
@media screen and (min-width: 750px) {
.page-width {
max-width: 1200px !important;
margin: 0 auto !important;
}
}
Best regards,
Devcoder 
@BelgerArts before messing with code, check Customize > Theme settings > Layout > Page width first, most 2.0 themes including Dwell ship that as a native slider (roughly 1000-1600px), no code involved and nothing to break.
if you need narrower than the slider’s floor, then yeah the CSS route above is the way, just confirm .page-width is actually the class wrapping your content via the browser inspector before you commit to it, that class name isn’t universal across every theme and if it’s wrong the override just silently does nothing.
- Hamid
Hi @BelgerArts
Three ways to change it, easiest first.
1. Theme settings, no code
Customize → Theme settings → Page → Page width. Three options: Narrow, Normal, Wide. Narrow is the default, which is what you’re on.
2. Change it globally with CSS
Those three options map to fixed values:
- Narrow → 90rem
- Normal → 120rem
- Wide → 150rem
If Narrow is still too wide, add this in Theme settings → Custom CSS:
.page-width-narrow {
--page-content-width: 70rem;
}
The class sits on , so this affects every page.
3. Change only the product page
#MainContent carries a data-template attribute, so you can scope it:
#MainContent[data-template="product"] {
--page-content-width: 70rem;
--page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}
You need both lines here. The theme sets --page-width on using a calc that reads --page-content-width at that point, so the value is already resolved before it inherits down the page. Changing only the content width further down won’t recalculate it.
If you’re using an alternate product template (product.something), use [data-template^="product"] instead.
had the same thing on dwell, the narrow setting still felt too wide for me. i just did the custom css route in theme settings instead of touching base.css, easier to undo later if you mess it up. also check a phone after, mine went almost edge to edge until i left the side padding alone.
Hi @BelgerArts Welcome To Shopify Community So The Dwell is part of the newer Horizon theme collection, which is built on web components rather than Dawn-style monolithic Liquid, so the fix works a bit differently than older Dawn-based themes, but the concept is the same.
Most Horizon-family themes control page width through a CSS custom property (something like --page-width or a similar variable) rather than a hardcoded value scattered across files, so the cleanest fix is finding that variable in your theme’s base/global CSS file (via Online Store > Edit Code) and overriding it with a smaller value, rather than hunting for individual max-width declarations on each page type.
If you can’t locate a single global variable, the alternative is adding an override directly in theme.liquid, inside a <style> block placed before the closing </head> tag, targeting whatever the page-width wrapper class is (inspect an actual page’s HTML via browser dev tools to find the exact class name Dwell uses, since it may differ slightly from Dawn’s .page-width). That way the override applies site-wide without needing to touch every template file individually.
Since Dwell’s structure can shift between updates, the safest first step is opening dev tools on a live page, inspecting the width-limiting wrapper element, and confirming the exact class/variable name before writing the CSS override, that avoids the override silently breaking on a future theme update. Hope this helps, and if it does, don’t forget to like and mark it as the solution. Thank you!