Narrow product page on desktop Dawn 14.0.0 - how to fix?

[veganjoyjar]

Hi all,

I’m looking at my site on my desktop, and the product page contents are far too narrow, especially compared to the collection page used to navigate to the product.

I’ve attached 2 screenshots explaining the difference in width of both.

Is there an easy CSS fix I can make that only adjusts the product detail pages for desktop so they display at the same width as other pages within the theme?

Collection page: https://veganjoyjar.com/collections/vegan-t-shirts

Product page: https://veganjoyjar.com/products/vegan-muscle-unisex-heavy-cotton-tee

Thanks!

[BSSCommerce-HDL]

Hi @veganjoyjar ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file → Save

.page-width:has(.product) {
    max-width: 100vw !important;
}

Here is result:

Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[veganjoyjar]

Thanks for that. Sorry if this is a silly question, but what am I searching for exactly in the step ‘Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid’?

[PageFly-Richard]

Hi @veganjoyjar

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly

[BSSCommerce-HDL]

@veganjoyjar You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css or styles.css

[veganjoyjar]

That’s fantastic. Thank you.