How can I adjust the max width for sections in my Archetype Fetch theme?

Store Design
, ,

Topic summary

A user seeks CSS code to adjust the maximum width of sections in their Archetype Fetch theme, as content appears too stretched on large screens. They want to limit section width while keeping banners at full width.

Solutions provided:

  • Add .page-width { max-width: 1200px; } to the theme’s CSS file to control overall section width
  • Adjust the pixel value (1200px) as needed for desired width

Follow-up issue resolved:
The user successfully applied the code but noticed the header bar also became constrained. A targeted solution was provided:

  • Add #headerWrapper .page-width { max-width: 1500px !important; } immediately after the first code snippet
  • This keeps the header at full width while maintaining narrower sections

Both CSS snippets use the .page-width class to control container widths, with the !important flag ensuring the header override takes precedence.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Can someone please help me with a snippet of css that I can put on each section of my theme, to be able to change the max width. It is too stretched out on big screens but I don’t want the whole website to have a max width because I have banners that look ok, but other sections do not.

My theme is Archetype fetch theme

www.littlelovesstore.com

2

You can try to use this code and change the max-width to your desired pixel width

.page-width {
    max-width: 1200px;
}
3

Hi @ashashash

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 theme.css file:
.page-width {max-width: 1200px !important;}

Note: You can change the width yourself.

Regards,

San

4

Thank you, that worked for all my sections, and kept the banners wide. Is there any way to keep the header bar full width?

5

You can add the following code immediately after the code you already inserted

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