Blank space on the right and left, desktop version

[macoburn]

Hi there, I am using the Refresh theme and I have blank space on the right and left on all pages. This occurs on my homepage, product pages, contact pages, etc. I have tried many solutions offered on discussion threads with no luck.  Any help please! See pictures for reference. 

 

[Preccy]

Hi Macoburn
Have you tried checking how it looks on mobile? Probably it's not responsive on desktop but responsive on mobile.

Either ways, it's a responsiveness issue.

[TheUntechnickle]

Hey @macoburn,

Hope you're doing well! In order to remove the blank spaces, or increase the page width across your store - Go to Online Store --> Themes --> Customize --> Theme Settings --> Layout, and set the page width to 1600px.

This should work 🙂

Cheers!
Shubham | Untechnickle

[goldi07]

Hello @macoburn 

How to Fix This:

1. Adjust Max Width of the Container
Try increasing the max width for your main container by adding this CSS at the bottom of base.css or theme.css:

@media screen and (min-width: 1024px) {
  .page-width {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

If your theme uses a different container class, replace .page-width with the correct class (check in Shopify's theme code or inspect it in the browser).

2. Make the Sections Full Width
If a specific section (like a banner or collection) is not taking full width, force it:

@media screen and (min-width: 1024px) {
  .shopify-section {
    width: 100vw !important;
    max-width: 100% !important;
  }
}

3. Check Theme Settings
. Go to Online Store > Themes > Customize
. Check if there's a Container Width or Layout Width setting.
. Increase it to Full Width if available.

Thank you 😊

[DaisyVo]

Hi @macoburn  Can you share store url? 

[DaisyVo]

Hi,  Can you share store url?