How can i make more space for product page?

Store Design
, , ,

Topic summary

A user seeks to expand the product page layout to prevent text from appearing cramped or “squished.”

Problem:

  • Product page text is too compressed
  • User wants more breathing room in the layout

Solution Provided:
A support representative (Dan-From-Ryviu) offered custom CSS code to adjust the product page width:

  • Navigate to: Online Store > Themes > Customize > Theme settings
  • Add provided CSS targeting .product__info-wrapper and .product__media-wrapper elements
  • Code adjusts width calculations for medium and small product layouts on desktop (min-width: 990px)

Status: Solution provided, awaiting user implementation and feedback.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hi, I would like to have more space when I click on a product. The text shouldn’t look too squished like I have right now.

I hope you can help me.

Thanks

From this:

123.png
123.png1895×934 225 KB

To this:

12345.png
12345.png1895×849 256 KB

2

Hi @Anonymous

Can you share your store link so I can check?

1 Like
3

Hi, sry i forget.

Url is: https://t71vm9-qa.myshopify.com/

4

Go to your Online Store > Themes > Customize > Theme settings, add this code to Custom CSS

@media (min-width: 990px) {
    .product--medium:not(.product--no-media) .product__info-wrapper, 
    .product--small:not(.product--no-media) .product__media-wrapper,
    .product--medium:not(.product--no-media) .product__media-wrapper, 
    .product--small:not(.product--no-media) .product__info-wrapper {
        max-width: 50% !important;
        width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2) !important;
    }
}
1 Like