How to Reduce Size of Product Pages on Mobile Phones

Topic summary

A user seeks to reduce the size and improve the layout of product pages on mobile devices for better readability and scrolling. The current mobile product pages appear too large and cluttered.

Proposed Solution:
Another user provides step-by-step instructions:

  • Navigate to Online Store → Edit Code
  • Locate the theme.liquid file
  • Insert custom CSS code above the tag

The solution includes specific CSS styling to modify mobile product page appearance. Screenshots were shared comparing the current site layout with desired examples from competitor websites, though the image content and code snippet appear corrupted in the thread.

Status: A technical solution has been offered but not yet confirmed as implemented or tested.

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

Hi,

I wanted to reduce the layout of Product Pages for mobile phones. The product pages seem very large on mobile phones. I wanted to reduce the size and layout of the product descriptions for readability and make it easier when you scroll.

Please see screenshots below of website product page and examples from other product pages how i would like them to look. My website is www.liftchairheaven.com. Example of other website is www.relaxtheback.com

Screenshot for Lift Chair Heaven

Lift chair heaven screen shot

example from other website

Hey @Allen6224

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed