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.
46

Ok thank you.

How about if I wanted to add an image as a banner on the same page. Is this possible?

Thank you so much in advance.