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:
Status: one suggested CSS fix has been offered; the original poster has not yet confirmed results. The thread remains open with no verified resolution.
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;
}
}