How can I create a full-width page using the Craft theme?

Store Design

Topic summary

A user is attempting to create a full-width page in Shopify’s Craft theme but finds the page remains narrow despite adjusting top and bottom padding.

Solutions Provided:

Multiple community members offered CSS-based fixes:

  • Option 1: Add custom CSS targeting .page-width with max-width: 100% !important; and margin: 0 auto; properties
  • Option 2: Insert the CSS code in theme.liquid file before the closing </body> tag
  • Option 3: Place the code before the </head> tag in the layout folder’s theme.liquid file

Implementation Steps:

  1. Navigate to Shopify Admin > Online Store > Themes
  2. Select theme > Edit Code > Open theme.liquid
  3. Locate the appropriate closing tag (</body> or </head>)
  4. Paste the provided CSS code
  5. Save changes

Note: Contributors advised that users should be technically familiar with Liquid code and Shopify themes, or consider hiring a Shopify expert. Screenshots were shared demonstrating the implementation process and expected results.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1
Show More

I am trying to create a full-width page option but I only see the top and bottom padding on my wide page which is still very narrow. I am using the theme called Craft from Shopify.

2

@JavierExposito
Share your store url ?

1 Like
3

https://filmjavier.com/pages/weddings-and-engagements

4

@JavierExposito
put below css to make page width wider

.page-width {
    max-width: 100% !important;
    margin: 0 auto;
    padding: 0 1.5rem;
}

Ujjaval_0-1671082074464.png
Ujjaval_0-1671082074464.png1438×759 89.3 KB

5

Screenshot 2022-12-15 at 12.31.36 AM.png
Screenshot 2022-12-15 at 12.31.36 AM.png2356×1468 179 KB

6

@JavierExposito
put code in theme.liquid file before closing tag

you can see in below pic.

Ujjaval_0-1671082897874.png
Ujjaval_0-1671082897874.png1440×758 56.1 KB

7

Hello @JavierExposito ,

To resolve this issue, you need to add the below-provided code to your theme.liquid file just before the tag:-

Here are the steps to fix the same.

Note: You are advised to follow the instructions if you are technically familiar with handling liquid.code or Shopify theme, else, consider hiring a Shopify expert.

Go to your Shopify admin > online store > themes.

Select your theme > edit code > open theme.liquid from the layout folder

Find (using ctrl+f) and paste the code before

Save the changes

Code:-

.main-page-title{ text-align: center; } .page-width{ max-width: 100% !important; }

Result:-

15.99 KB of 69.55 KB

image.png

Hope it was helpful. Let us know if you need any more help with the issue.

Regards,

CedCommerce