How do I limit the width of entire website on shopify?

Store Design
, ,
1

Hi Good folks of shopify,

I am trying to make my desktop website look like my mobile website. So I am looking to limit the width of the overall page on desktop browsers.

Is there a way to do that?

Url : https://my-gurgaon-store.myshopify.com

example website how I want it to look : www.urbanic.com

2

Hi @pskbecks

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css.

Step 3: Paste the below code at bottom of the file → Save

#MainContent {

margin-left: 25%;

margin-right: 25%;

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

3

Hi @PageFly-Victor Thank you for reply.

I tried, this works but this sets margin on all screen sizes.

Is there a way where the margin can be set only on laptops or larger browsers, while leaving the mobile view as it is ?

4

@pskbecks

You can try again with this code:

@media screen and (max-width: 1024px ) and (min-width: 600px ){
#MainContent {
margin-left: 25%;
margin-right: 25%;
}}

2 Likes