Shopify themes, liquid, logos, and UX
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.
Can anyone please help and guide me how to make the templates full width?
Best regards
Valdemar
Solved! Go to the solution
This is an accepted solution.
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; }
Thanks @valdemarost
Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.
This is an accepted solution.
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; }
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
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.
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.
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.
thanks can you please share particular page url
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;
}
can you please share screenshot issue image
oh, yes please add this code
.template-index .wrapper {
max-width: 100%;
}
it's my pleasure to help us
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,
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.
Thanks for you nee full page or some section full width.
Thanks for it
.template-product .wrapper {
max-width: 100%;
}
it's my pleasure to help us
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!!
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
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
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.
if possible to share a particular page URL.
thanks for coming back so quickly.
Heres a page I'd like wider https://jgcontemporary.art/pages/about-us.
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;
}
That's amazing! Thank you so much!
How could I make the text slightly narrow but leave the image as is?
i think the current look it proper spacing overall page please don't change anything is fine now
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.
yes, please use same code
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
@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. 🙂
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%;}
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
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.
The password is teocku, thank you so much
Thanks for the password but sorry we are not able to store it.
Just fixed it, sorry about that
no rush.
Thanks for update.
This worked perfect, thanks for your help. Is there actually a possibility to set page width per section as it is on homepage too?
thanks for your compliments please store url and screenshot what do you want?
Hi @KetanKumar,
#deine-galeriewand .main-content {
width: 100% !important;
margin: 0 auto !important;
}
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024