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

Hi there!
I am currently building our online store - not released yet on a domain.
I am using Narrative Theme and have a question about making pages full-width.
The home page is full-width by default.

  • However the custom page templates I am creating (Narrative does not come with many page templates), is not full width (I think there is a padding??)

Can anyone please help and guide me how to make the templates full width?
Best regards

Valdemar

1 Like
2

Thanks @valdemarost

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

3

Hi @KetanKumar thank you for replying.

URL: https://abn-dk.myshopify.com

4

@valdemarost

Thanks for URL.

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
 .page-width {
    max-width: 100%;
}
.template-page .medium-up--four-fifths {
    width: 100%;
    left: 0 !important;
}
2 Likes
5

@KetanKumar amazing! It worked - thank you so much!

6

Hello @KetanKumar ,

I am having the same issue as @valdemarost but I am using Brooklyn theme. I have tried what you suggested and it didn’t and I was wondering if you can help?

URL: better-quarantine.myshopify.com

1 Like
7

Hello, @bq

Welcome to the Shopify community!
and Thanks for your Good question.

sorry, your store is password protect can you please share us,
So I will check and provide a solution here.

8

Hello @KetanKumar ,

I’m using a third party theme called Debutify, I’ve already pasted this coding to make it full width but it doesn’t work

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

Do you have any work around for this ?

Thank you.

2 Likes
9

@mmu28

Sorry for facing this issue, it’s my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. :blush:

Please share your site URL,
So I will check and provide a solution here.

10

Hello @KetanKumar

The Store URL is kiffefood.myshopify.com

Thank you.

11

@mmu28

thanks can you please share particular page url

12

@KetanKumar

Thank you.

It’s kiffefood.com

13

@mmu28

Thanka for it

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.shopify-policy__container {
    max-width: 100% !important;
}
14

@KetanKumar ,

Thank you. But nothing changed after I past the script.

Thanks.

15

@mmu28

can you please share screenshot issue image

16

Thank you @KetanKumar ,

mmu28_0-1613027681715.png
mmu28_0-1613027681715.png1896×858 206 KB

Here’s the screen shot.

Thanks.

17

@mmu28

oh, yes please add this code

.template-index .wrapper {
    max-width: 100%;
}
18

@KetanKumar

Thank you very much. It works!

Have a nice day!

1 Like
19

@mmu28

it’s my pleasure to help us

20

Hey @KetanKumar ,

I am also facing the same issue wherein for the custom page I want it to be full width.

I want the full width only for the custom pages I make and not for the entire website.

Please help me.

My store URL is momomia1.myshopify.com

Thanks

1 Like