Studio Theme: Custom pages not displaying with full width

Store Design
, ,

Topic summary

Issue: After switching to the Studio theme, collection and blog templates display at full width (~1400px), but custom “About” pages (About the Designer, Shipping, FAQs, etc.) appear much narrower. The request is to make these pages match the site’s wider layout.

Proposed fixes (via theme CSS edits in Assets > base.css):

  • Set the generic page container to full width variable: .page-width { max-width: var(–page-width) !important; } (suggested by two contributors).
  • Alternatively, relax the narrow container: .page-width–narrow { max-width: 90%; } to broaden pages that use the “narrow” class.

Notes:

  • A screenshot was shared to illustrate the result, but no code snippets beyond simple CSS are required.
  • No confirmation from the original poster on whether the solutions resolved the issue; status appears open/awaiting feedback.
Summarized with AI on January 17. AI used: gpt-5.
1

I just updated my shop with the Studio theme, and am noticing that all collections and the blog are showing with the wider width (1400) but any page I have created (all are under the “About” Tab: About the Designer, Shipping, FAQs, etc.) are showing up with a much narrower width. How can I get these pages to display as wide as the rest of the website?

Shop URL: www.amandakjewelry.com

Thanks!!

Amanda

2

Hi @Amandalman,
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the custom page not display full width ,let’s try this solution:
Online Store ->Theme ->Edit code
Assets ->Base.css

.page-width{
max-width: var(--page-width) !important;
}

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

3

Hi @AmandaInman

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:

.page-width {max-width: var(–page-width) !important;}

Regards,

San

4

Hi, @AmandaInman .

Follow These Steps.

Goto Online store > Assets > Edit code > find Base.css File and paste the code mentioned below.

.page-width--narrow {
    max-width: 90%;
}

Result: Check all pages.

websensepro_0-1696332508536.png
websensepro_0-1696332508536.png1346×590 223 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!