Expanding Layout on Product Page - Help Needed

Topic summary

Goal: expand the product page layout so the product image sits more to the left and the selection options move right, using the full page width instead of a centered, narrow column.

Context: a preview link and a screenshot were provided to show the current centered layout with unused side space.

Proposed solution: add CSS in base.css with a media query for screens wider than 900px (a media query applies styles only above a specified screen width). The code:

  • Increases the container’s maximum width to 130rem using .page-width:has(.product).
  • Adds 15rem left padding to the product info wrapper to shift it right.

Status: one suggested CSS fix has been offered; the original poster has not yet confirmed results. The thread remains open with no verified resolution.

Summarized with AI on December 15. AI used: gpt-5.

Hi everyone,

I’m trying to make better use of the space on my product pages. Right now, the product image and selection options are centered, leaving empty space on both sides. I’d like to spread these elements out so that the product image aligns more to the left and the selection options move more to the right, filling the full width of the page.

Here’s the preview link to my store: https://www.rappid.run/collections/frontpage
Password: Password

Thank you in advance for your help!

Best,
Kim

@KimGottwald , go to base.css and add the following code :

@media (min-width:900px){

 .product__info-wrapper.grid__item {
    padding-left: 15rem !important;
}

.page-width:has(.product) {
    max-width: 130rem !important;
}

}
1 Like