Re: Full width on a custom page template

Solved

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

valdemarost
Excursionist
37 1 5

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

Accepted Solution (1)
KetanKumar
Shopify Partner
36927 3642 11996

This is an 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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 171 (171)

KetanKumar
Shopify Partner
36927 3642 11996

Thanks @valdemarost 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
valdemarost
Excursionist
37 1 5

Hi @KetanKumar thank you for replying.

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

KetanKumar
Shopify Partner
36927 3642 11996

This is an 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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
valdemarost
Excursionist
37 1 5

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

bq
Visitor
1 0 1

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
Shopify Partner
36927 3642 11996

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mmu28
Excursionist
11 0 6

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
Shopify Partner
36927 3642 11996

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mmu28
Excursionist
11 0 6

Hello @KetanKumar 

 

The Store URL is kiffefood.myshopify.com

 

Thank you.

KetanKumar
Shopify Partner
36927 3642 11996

@mmu28 

thanks can you please share particular page url 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mmu28
Excursionist
11 0 6

@KetanKumar 

 

Thank you.

 

It's kiffefood.com

 

 

KetanKumar
Shopify Partner
36927 3642 11996

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mmu28
Excursionist
11 0 6

@KetanKumar

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

Thanks.

KetanKumar
Shopify Partner
36927 3642 11996

@mmu28 

can you please share screenshot issue image

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mmu28
Excursionist
11 0 6

Thank you @KetanKumar ,

 

mmu28_0-1613027681715.png

 

 

Here's the screen shot.

 

Thanks.

KetanKumar
Shopify Partner
36927 3642 11996

@mmu28 

oh, yes please add this code

.template-index .wrapper {
    max-width: 100%;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mmu28
Excursionist
11 0 6

@KetanKumar 

 

Thank you very much. It works!

Have a nice day!

KetanKumar
Shopify Partner
36927 3642 11996

@mmu28 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mmu28
Excursionist
11 0 6

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
Excursionist
11 0 6

@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
Shopify Partner
36927 3642 11996

@mmu28 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mmu28
Excursionist
11 0 6

@KetanKumar ,

 

Thank you. Need full width for full page.

 

Thanks.

KetanKumar
Shopify Partner
36927 3642 11996

@mmu28 

Thanks for it

.template-product .wrapper {
    max-width: 100%;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
mmu28
Excursionist
11 0 6

@KetanKumar 

 

Thank you, it works perfectly.

 

Thanks for your help.

 

Have a nice day.

KetanKumar
Shopify Partner
36927 3642 11996

@mmu28 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
moyanoa
Excursionist
29 2 5

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
Excursionist
29 2 5

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
Shopify Partner
36927 3642 11996

@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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
jjjjjjjj
Excursionist
18 0 5

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
Shopify Partner
36927 3642 11996

@jjjjjjjj 

if possible to share a particular page URL.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
jjjjjjjj
Excursionist
18 0 5

thanks for coming back so quickly. 

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

 

KetanKumar
Shopify Partner
36927 3642 11996

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

 

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
jjjjjjjj
Excursionist
18 0 5

That's amazing! Thank you so much!

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

KetanKumar
Shopify Partner
36927 3642 11996

@jjjjjjjj 

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

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
jjjjjjjj
Excursionist
18 0 5

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
Shopify Partner
36927 3642 11996

@jjjjjjjj 

yes, please use same code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sarto
Visitor
1 0 0

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
Tourist
5 1 3

@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
Shopify Partner
36927 3642 11996

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MuradNofal
Excursionist
17 0 2

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
Shopify Partner
36927 3642 11996

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MuradNofal
Excursionist
17 0 2
teocku is the password
MuradNofal
Excursionist
17 0 2

The password is teocku, thank you so much

KetanKumar
Shopify Partner
36927 3642 11996

@MuradNofal 

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

KetanKumar_0-1615405102303.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MuradNofal
Excursionist
17 0 2

Just fixed it, sorry about that

KetanKumar
Shopify Partner
36927 3642 11996

@MuradNofal 

no rush.

Thanks for update.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
hairexpert
Tourist
5 1 3

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
Shopify Partner
36927 3642 11996

@hairexpert 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Deniz-Isso
Excursionist
16 0 3

Hi @KetanKumar,

I want to bring the content on a specific page to width: 100%.
 
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!