How do I adjust the width of my whole website?

Shopify Discussion

Topic summary

A user’s website displays correctly on MacBook but appears smaller on larger desktop screens, creating unwanted white space on both sides. They’re seeking an auto-resize solution for different screen sizes.

Suggested Solutions:

  1. Built-in Theme Settings: Navigate to Online Store > Themes > Customize, then find Theme Settings > Layout section to adjust the Page Width setting for larger screens.

  2. Custom CSS Approach: Two responders offered to provide custom CSS code for more granular control. One shared specific CSS targeting .page-width class to set width to 100% with padding adjustments.

Implementation: The CSS code should be added through: Customize theme > Settings (top left) > Custom CSS section.

The discussion remains open, awaiting the user’s response on their preferred approach or website preview link for tailored support.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

It currently looks fine on macbook - but on a larger desktop everything else seems resized smaller, leaving white spaces on left and right. Is there an auto size code that enables the system to resize for different screen sizes?

1 Like
2

Hey @withaudette ,

Hope you’re doing well :slightly_smiling_face:

Here’s what you can do:

  1. Theme Customizer:
    Go to your Shopify admin, navigate to Online Store > Themes, then click Customize on your active theme.
    Under Theme Settings (usually found at the bottom left), look for the Layout section. From there, you can increase the Page Width to better fill out larger screens.

  2. Custom Code (Optional):
    If you’d like more control, we can help you add custom CSS that automatically adjusts the layout based on screen size — ensuring it looks great on all devices. Let us know if you’d like help with that, and we’ll walk you through it or take care of it for you.

Let us know how you’d like to proceed or if you need any help making these changes — happy to assist!

Best regards,
Shubham | Untechnickle

3

@withaudette , can you please share the website preview link, I’ll give you support

.page-width {
width: 100% !important;
max-width: 100% !important;
padding: 0 20px;
}

Paste this code in click on customize the theme > settings on Top left > scroll down to custom CSS > add the code there.

If it works please like and accept the answer