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

[Deniz-Isso]

@KetanKumar I was already able to fix the problem myself. 

[KetanKumar]

@Deniz-Isso 

Wow it would be great

Thanks for update 

[erikale91]

Hello, 

the

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

 didn't work on my custom theme. Can you please help!

Thanks kindly,

[KetanKumar]

@erikale91 

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

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

Please share your site URL,
I will check out the issue and provide you a solution here.

[erikale91]

Www.americanmusclefit.us

[Kinjaldavra]

@erikale91  Follow this : Online Store >> Themes >> Actions >> Edit code >> Assets >> theme.css

.wrapper {
    max-width: 100% !important;
}

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

[ratsquad]

hi @KetanKumar 

I managed to get more width with this code: 

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

But as you can see it still has a margin. I want full width. What code i need to use?

This is my web, the pass is "noexavisu"

https://tuevolucionpersonal.com/

Thank you

[KetanKumar]

@ratsquad 

can you please update this code

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

[ratsquad]

It works!

thank you so much!

[KetanKumar]

@ratsquad 

it's my pleasure to help us

[ratsquad]

hi @KetanKumar .

How can i delete this margin? (selected in red)

Thanks!

[KetanKumar]

@ratsquad 

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

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

Please share your site URL,
I will check out the issue and provide you a solution here.

[ratsquad]

Sorry @KetanKumar i forgot to put the link.

https://www.ratsquad.es/products/como-carburar-un-motor-2-tiempos

Here you have it.

Thanks!

[Kinjaldavra]

hello @ratsquad 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 .main-content{
    margin:0 !important;
}

[ratsquad]

Thanks a lot!

It works perfect 🙂

[KetanKumar]

@ratsquad 

its my pleasure to help us

[ratsquad]

Hi, 

i want to remove the margin selected in the photo in a home page.

https://tuevolucionpersonal.com/

thank you 

[KetanKumar]

@ratsquad 

sorry for issue 

i can help but your store is password protect can you please share us

[KetanKumar]

@ratsquad 

No rush, Thanks for detail please add this code

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

.template-product .main-content {margin-top: 0px;}

[ratsquad]

hi.

i need to remove this margins in a regular page

https://tuevolucionpersonal.com/pages/cursos-online-y-presenciales

password is: noexavisu

thanks

[KetanKumar]

@ratsquad 

do you have like this?

[ratsquad]

I have it like the photo i attached, and i want it like the photo you attached.

thank you so much

[Kinjaldavra]

hello @ratsquad 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.main-content.wrapper{
        max-width: 100%;
        padding: 0;
}
.site-header{
        padding: 5px 0 !important;
}

[KetanKumar]

@ratsquad 

thanks for confirm please add this code

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

#cursos-online-y-presenciales .main-content {max-width: 100%;padding: 0;}
#cursos-online-y-presenciales .site-header {padding-bottom: 0;}

[BauceBrothers]

Hey could I have some help on this page please?

The header module with the starting with the text 'the craft hot sauce hot 100' should be full width and have no spacing with the edge.

Then the second black module underneath should be centered as it is - but the black should stretch to the end of the page?

Can anyone help me with this?

[KetanKumar]

@BauceBrothers 

do you need full width?

[BauceBrothers]

yeah I would like the page to be full width, but when i apply styling it makes all the sections full width

[KetanKumar]

@BauceBrothers 

do you have any particular page issue so please sent page url? 

[CyberdyneJoule]

lol...i have pasted this code in dawn 12.0 base.css and it works...now all pages are full width on my store.... are you putting it in base.css, if not - try once.

[rohantuteja]

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

[mmu28]

Hi,

For the custom pages, you can go to pages in Shopify and choose full width
like below:

[image: image.png]

[image: image.png]

Unless you're using a third party page developer, than you can change the
settings inside the app.

[KetanKumar]

@rohantuteja 

sorry for this issue 

let me know page URL do you need full width?

[rohantuteja]

Hey @KetanKumar ,

This is the URL

https://rethought.in/pages/sell-with-us-1

Please help me with the same.

[rohantuteja]

Hi @KetanKumar 

Please help me to increase the section width to full width.

https://rethought.in/pages/sell-with-us-1

On this link, currently, I have set the full width for all the template pages. 

I would like to set the full width for only the slideshow section, so that the header isn't set to full width. 

I am using the Brooklyn theme. 

Please help me with this. 

Thanks

Rohan Tuteja

[KetanKumar]

@rohantuteja 

do you mean like this?

[rohantuteja]

@KetanKumar 

Yes, like this but without the header extended to full width. In the screenshot you sent, the header also has the full width, but I want the padding to be there in the header section. 

[KetanKumar]

@rohantuteja 

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

#sell-with-us-1 .main-content .wrapper {
    max-width: 100%;
    padding: 0;
}
#sell-with-us-1 .main-content .grid__item {
    left: 0;
    width: 100%;
}

[rohantuteja]

Hey @KetanKumar,

That worked brilliantly for me.

Btw, I just wanted you to know that I am a big fan of your work.

Thank you so much.

Regards

Rohan Tuteja

[KetanKumar]

@rohantuteja 

it's my pleasure to help us

[BauceBrothers]

Hey Ketan - could you help me solve a similar issue on my store?

this is the page:

https://baucebrothers.com/pages/new-test

Thank you in advance!

[KetanKumar]

@BauceBrothers 

sorry any issue 

bt sorry i can't see please share issue images?

[BauceBrothers]

Hey Ketan - sorry!

Here you go, I have a bunch of section stacked on that page - but I would like them to go full width, could you help?

[KetanKumar]

@BauceBrothers 

sorry i can't see your attachment

[BauceBrothers]

Hey mate sorry - I changed the template accidently - https://baucebrothers.com/pages/new-test

Please check the link now - it may need refreshing - but should match the screenshot

[KetanKumar]

@BauceBrothers 

no rush please add this css code your css bottom of the file 

#new-test main#main .container {
    max-width: 100%;
}

[BauceBrothers]

This worked amazing - thanks you!

[BauceBrothers]

is there a way to make it so the blog item aren't stretched?

See how they appear on the home page

Thanks for your help mate - appreciate it!

[KetanKumar]

@BauceBrothers 

how?

[BauceBrothers]

Hey sorry - please see here:

https://baucebrothers.com/pages/2021-craft-hot-sauce-awards

[KetanKumar]

@BauceBrothers 

Thanks for it please add this code

div#shopify-section-jess-blog {
    padding: 0px 20px;
}