Narrative Theme. Change the width of the site only in desktop mode?

euphi123
New Member
2 0 1

Hey guys,

I really like the width of my site when I am editing it in the shopify customizer with the spacing left and right.

When I preview the site, it is fullscreen because I think it is easier to scale with mobile devices this way? How ever I'd like to keep it responsive for mobile devices (100% width) but a max width on desktop devices. I have some idea of css like I know how and where to implement or edit code snippets but I have no clue how to handle this problem.

I read about ppl with shopify paid plans get a free site customization from shopify support team? Didn't know where to ask for so I just post my request here.

For anyone wandering. This is my site : https://wheatsy.com/ and I basically want it to have a margin left and right that is half the distance from the screen side to the top menu bar.

 

Hopefully someone can help me, seems pretty time intensive.

 

Greetings

KetanKumar
Shopify Partner
19070 1993 7033

Hello, @euphi123 
Welcome to the Shopify community!

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%;
    padding: 0px 5px;
}
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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
euphi123
New Member
2 0 1

Hello @KetanKumar  and thank you for the quick reply.

The thing is I don't want the site to be 100%. It already is.

I want the site to be like 70% in desktop only mode aligned to center and 100% in mobile mode.

 

Greetings

0 Likes
KetanKumar
Shopify Partner
19070 1993 7033

ok just reduce

@media only screen and (min-width: 750px) {
.page-width {
    max-width: 70%;
    padding: 0px 5px;
}
}
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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
artistictransfe
New Member
1 0 1

After searching several hours, this code finally did it! The only thing is, I can't adjust the width. If you have any further suggestions, please advise. Other than that, my product pages look so much better!

KetanKumar
Shopify Partner
19070 1993 7033

@artistictransfe 

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.

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes