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

Highlighted
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

1 Like
Highlighted
Shopify Partner
4777 708 1508

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
Highlighted
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
Highlighted
Shopify Partner
4777 708 1508

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
0 Likes