Supply Theme: Increase Width of Site

Abbey1
Shopify Partner
14 0 1

Is there a way to increase the overall width of the site?   If so, how can I go about doing this? 

Replies 17 (17)
CCent
Tourist
8 0 1

bump help

David_S2
Shopify Staff
15 0 3

I wouldn't recommend making the Supply theme any wider - it isn't designed with a wide layout in mind. For options to have a wider theme, I'd checkout a theme designed with a wide layout from the Theme Store. Changing the width of the main site wrapper in Supply will mess up things like the quality of the slideshow and your grid layout across the site on larger screens.

Although, afaik the eqivalent to `siteWidth` from above would be to just add the following to the bottom of the `theme.scss.liquid` file: 

main.wrapper {
  max-width: 1060px;
}


And adjusting `1060px` to whatever you prefer. 

CCent
Tourist
8 0 1

@david S

 

i did this the other day and it worked! It didn’t stretch or change the slideshow either. Only problem was it messed up my mobile version of the site.

 

is there a way to just modify the “large” or desktop version of making the width wider. It looks perfect on mobile 

David_S2
Shopify Staff
15 0 3

You could wrap it in a media query to only affect large screens so. This should do it:

@include at-query($min, $large) { 
  main.wrapper {
    max-width: 1060px;
  }
}

 

CCent
Tourist
8 0 1

@David S

 

Huge help! Greatly appreciated. I ended up changing the code a little bit so the header would also be wide as well. This did not effect my Slideshow NOR my MobileVersion. Big success. Thanks.

 

@include at-query($min, $large) { 
  .wrapper {
    max-width: 70%;
  }
}

 

David_S2
Shopify Staff
15 0 3

Nice one, glad to hear! For some context, I'd give this thread a read as to why whitespace and a max-width on your content is important: https://ux.stackexchange.com/questions/104705/why-do-many-sites-leave-half-of-each-webpage-empty/104...

WhoaBev
New Member
1 0 1

Phillip! Can you please tell me how to edit the code so the page will enlarge with the window width and height? Right now, different sections and pictures change size and get cut off when you change the window width

Suri012
Tourist
10 0 3

Hello,

 

I cannot find the timber.scss under the asset folder.

The only folder close to that I have is the theme.css folder, but does not have "$sitewidth" anywhere.

 

I'm trying to decrease the width of my page so it does not take up the whole screen/page.

Please help! Thank you.