How can I make a custom page template full width in Narrative theme?

Store Design

Topic summary

Core Issue:
Users across multiple Shopify themes (Narrative, Brooklyn, Debutify, Showcase, Envy, Empire, Trade, and others) struggle to make custom page templates display at full width, as default templates include padding/margins that create unwanted whitespace.

Primary Solution Pattern:
A community helper (@KetanKumar) provides CSS code solutions tailored to each theme and page. The typical approach involves:

  • Navigating to Online Store → Theme → Edit Code
  • Locating the appropriate CSS file (theme.scss.liquid, timber.scss.liquid, styles.css, or theme.min.css depending on theme)
  • Adding custom CSS targeting specific page IDs or template classes
  • Setting max-width: 100% and padding: 0 on container elements

Common Code Pattern:

.page-width {
    max-width: 100%;
}
.template-page .medium-up--four-fifths {
    width: 100%;
    left: 0 !important;
}

Related Requests:

  • Making only specific sections full-width while maintaining header padding
  • Removing spacing between header and page content
  • Applying full-width styling to product pages and blog sections
  • Responsive video display (desktop vs. mobile versions)

Status:
Most users report successful resolution after receiving theme-specific CSS code. Solutions require basic code editing skills and vary significantly by theme architecture.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
48

@KetanKumar just for my interest, does this code works on all debutify themes? I added the code above in my debutify scss and nothing changed so far?! If you don’t mind you can check it under https://der-salon.eu/pages/friseur-rostock I actually want that page template full width and with no breadcrumb menu and space between main menu and hero section. Is there a chance for this? I appreciate your help. :slightly_smiling_face:

1 Like