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

[valdemarost]

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

[KetanKumar]

Thanks @valdemarost 

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

[valdemarost]

Hi @KetanKumar thank you for replying.

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

[KetanKumar · Accepted solution]

@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;
}

[valdemarost]

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

[bq]

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

[KetanKumar]

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.

[mmu28]

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.

[KetanKumar]

@mmu28 

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

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

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

[mmu28]

Hello @KetanKumar 

The Store URL is kiffefood.myshopify.com

Thank you.

[KetanKumar]

@mmu28 

thanks can you please share particular page url 

[mmu28]

@KetanKumar 

Thank you.

It's kiffefood.com

[KetanKumar]

@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;
}

[mmu28]

@KetanKumar, 

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

Thanks.

[KetanKumar]

@mmu28 

can you please share screenshot issue image

[mmu28]

Thank you @KetanKumar ,

Here's the screen shot.

Thanks.

[KetanKumar]

@mmu28 

oh, yes please add this code

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

[mmu28]

@KetanKumar 

Thank you very much. It works!

Have a nice day!

[KetanKumar]

@mmu28 

it's my pleasure to help us

[mmu28]

Hi again @KetanKumar 

How do I make the same full width for collection pages below :

https://kiffefood.com/collections/fast-food-collection

https://kiffefood.com/collections/all

Thank you again,

[mmu28]

@KetanKumar 

and also how do I make the same full width for product page like this:

https://kiffefood.com/products/asian-style-hot-chili-sauce

Thanks again.

[KetanKumar]

@mmu28 

Thanks for you nee full page or some section full width.

[mmu28]

@KetanKumar ,

Thank you. Need full width for full page.

Thanks.

[KetanKumar]

@mmu28 

Thanks for it

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

[mmu28]

@KetanKumar 

Thank you, it works perfectly.

Thanks for your help.

Have a nice day.

[KetanKumar]

@mmu28 

it's my pleasure to help us

[moyanoa]

Hi there,  I have the same problems to have this custom pages with full width... how can I solve this? https://5b2kz2cw6a5qmlrp-51150717086.shopifypreview.com (here I need the banner full width)

https://5b2kz2cw6a5qmlrp-51150717086.shopifypreview.com (here the background is not full width)

thanks!!

[moyanoa]

page about us I need banner full width, and there is a container something that doesn't allow it.

and in contact , the background is not full width...

thanks

[KetanKumar]

@moyanoa 

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

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

can you please share further issue screenshot

[jjjjjjjj]

Hello, 

I am using Showcase theme for my store, the url is https://jgcontemporary.art. 

I would also like to have a full width custom page on my site. Showcase has an amazing story page but it can only be used on on one page. I would like to be bale to create  full width pages when I require one (about us, shop our instagram are pages I would like to turn into full width).

Thank you so much in advance. 

[KetanKumar]

@jjjjjjjj 

if possible to share a particular page URL.

[jjjjjjjj]

thanks for coming back so quickly. 

Heres a page I'd like wider https://jgcontemporary.art/pages/about-us.

[KetanKumar]

@jjjjjjjj 

Thanks for the page URL

1. Go to Online Store->Theme->Edit code
2. Asset->/styles.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

#page-about-us .central.content {
    max-width: 100%;
    width: 100%;
    padding: 0;
}
#page-about-us .rte.cc-animate-init.-in.cc-animate-complete p {
    padding: 0px 15px;
}

[jjjjjjjj]

That's amazing! Thank you so much!

How could I make the text slightly narrow but leave the image as is?

[KetanKumar]

@jjjjjjjj 

i think the current look it proper spacing overall page please don't change anything is fine now 

[jjjjjjjj]

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.

[KetanKumar]

@jjjjjjjj 

yes, please use same code 

[sarto]

hi can you help me make my website to full width I removed the sidebar by everything is currently only at 75% to the left 

thank you so much

[hairexpert]

@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. 🙂

[KetanKumar]

@hairexpert 

thanks for the post can you please try this 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

#friseur-rostock main.main-content {padding-top: 0;}
#friseur-rostock main.main-content .wrapper {max-width: 100%;}

[MuradNofal]

Hello, 

I am using Envy theme for my store, the url is https://wearthepeace-clothing.myshopify.com we still havent connected the domain from our current store

I would also like to have a full width custom page on my site especially the store page, how would i be able to do that

Thank you so much in advance

Best regards

[KetanKumar]

@MuradNofal 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

sorry your store is password protect can you Please share
I will check out the issue and provide you a solution here.

[MuradNofal]

teocku is the password

[MuradNofal]

The password is teocku, thank you so much

[KetanKumar]

@MuradNofal 

Thanks for the password but sorry we are not able to store it.

[MuradNofal]

Just fixed it, sorry about that

[KetanKumar]

@MuradNofal 

no rush.

Thanks for update.

[hairexpert]

This worked perfect, thanks for your help. Is there actually a possibility to set page width per section as it is on homepage too? 

[KetanKumar]

@hairexpert 

thanks for your compliments please store url and screenshot what do you want?

[Deniz-Isso]

Hi @KetanKumar,

I want to bring the content on a specific page to width: 100%.

It's about this page: https://leemo.shop/pages/deine-galeriewand

Currently, I have this code:

#deine-galeriewand .main-content {
  	width: 100% !important;
    margin: 0 auto !important;
}

But something is wrong. Do you have a tip on how I can solve this issue?

Thank you!