I’m having an issue with my custom Pages in my Shopify store (Ritual Theme)

[kiukkupylly]

Hi, I’m having a layout issue with my custom Pages in my Shopify store (regular Pages using the page template, not product or blog pages).

I’m trying to make the content (text and images) on these Pages (I don't have problems with appear wider, but it’s locked into a very narrow centered column.

I’ve inspected the CSS and it seems that the .section--page-width layout and the theme’s grid system are forcing the content into grid-column: 2, preventing it from spanning the full width or even a wider part of the page.

I have tried adding .page--fullwidth classes and forcing grid-column: 1 / -1 or display: block, but none of this seems to break the constraint. Max-width overrides also don’t help, likely because the grid is still being enforced.

This only happens on custom Pages — my homepage, product pages, and other templates are working fine.

Could you please advise how to properly adjust this or break out of the grid limitation so that I can control the width of the content on my custom Pages?

Thanks so much in advance!

[Moeed]

Hey @kiukkupylly 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[TheUntechnickle]

Hey @kiukkupylly,

I completely understand your frustration with the narrow column layout on your custom pages in the Ritual theme. This is actually a common issue with newer Shopify themes, especially the Horizon-based themes like Ritual, which use more restrictive CSS Grid and container systems.

Based on my research, here are several solutions you can try to break out of that narrow constraint:

Solution 1: Target the Specific Page Width Container

The most direct approach is to override the page width restriction by adding CSS specifically for pages. Add this CSS to your theme's main stylesheet (usually in assets/base.css or assets/theme.scss.liquid):

/* Target pages specifically to make content wider */
.template-page .section--page-width,
.template-page .page-width {
    max-width: 100% !important;
    width: 100% !important;
}

/* Override the grid column restrictions */
.template-page .section--page-width > *,
.template-page .page-width > * {
    grid-column: 1 / -1 !important;
}

/* Alternative: Target the main content container */
.template-page main .container,
.template-page .main-page-content {
    max-width: 95% !important;
    width: 95% !important;
}

 

Solution 2: Create a Custom Full-Width Page Template

Since Ritual is built on Online Store 2.0, you can create a custom page template:

1. Go to Online Store > Themes > Customize
2. Click the Home page dropdown and select Pages
3. Click Create template and name it "Full Width Page"
4. Base it on your existing page template
5. Once created, you can add custom CSS specifically for this template

 

Solution 3: Override Grid Column Spanning

Since you mentioned the grid system is forcing grid-column: 2, try this more targeted approach:

/* Force content to span all grid columns on pages */
.template-page .grid,
.template-page [class*="grid"] {
    display: block !important;
}

.template-page .page-content,
.template-page .rte {
    grid-column: 1 / -1 !important;
    max-width: none !important;
    width: 100% !important;
}

 

Solution 4: Use CSS Grid Override

Based on Shopify's CSS Grid best practices, you can completely override the grid behavior:

.template-page .main-content {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 100%;
    width: 100%;
}

.template-page .section--page-width {
    grid-column: 1;
    max-width: 100% !important;
}

 

Implementation Steps:

1. Go to Online Store > Themes > Edit Code
2. Open the main CSS file (usually assets/base.css or assets/theme.scss.liquid)
3. Add your chosen CSS solution at the bottom of the file
4. Save and test

If you want to apply this only to specific pages rather than all custom pages, you can:

• Create a custom page template as mentioned in Solution 2
• Or add a custom CSS class to specific pages through the page editor

The key is using !important declarations to override the theme's built-in restrictions, since newer Shopify themes often have multiple CSS files with conflicting width restrictions.

Let me know if you need help with any of these approaches or if you'd like me to explain how to implement a specific solution in more detail!

Best regards,

Shubham | Untechnickle