Increase width of wrapper main-content for Supply theme

New Member
1 0 0

What code do I need to add/modify to make the entire page full screen of wrapper main-content but keep the header, nav and footer the same width it is now?  our page is   You can see the header and nav are full screen width, but I'd like to make all slider images and product collections sections full screen width as well.

When I change $siteWidth it changes the entire site.


Shopify Partner
4 0 3

you can try this css at the bottom of your theme.scss.liquid file:

.template-index .main-content {
    max-width: 100%;

That should make everything between your header and footer on the index page full width. Let me know if you still need help.

1 Like
New Member
3 0 0

Hi Chris, 

Please could you help me. 

When I have used your code it makes my whole theme wider, whereas I really only want to make the slideshow at the top of my page full page width, and everything else below it normal width. 

Is there anyway that I can do this please?



3 0 1

Hi John,

I have just started designing my store.  I am going through the same problem. I checked your site. It looks excellent.  I tried with the code Chris mentioned here. It's working fine but images are not getting full width, only frame of sliders are in full width.  I tried with different sizes of images, not working. Can you please help me, what changes should I make?