Help with reorganizing mobile product pages

Site URL: http://www.byspiritofsalt.com/shop/wrappingpaper

Hello - Is there a way to force mobile product pages to  maintain the desktop  2-column layout?

 I have some products with lots of product photos and it takes forever to scroll through them on mobile to reach the product information. Example:   https://byspiritofsalt.com/shop/wrappingpaper 

Additionally, products such as that one have multiple color options, and on desktop when you click the color option in the dropdown it moves the featured color image to the top, which is great. However on mobile there is no way to see what images correspond with the chosen color. 

My thinking is the easiest solution for both problems is to just keep the same layout as desktop. 

Add below code to pages>web tools>custom css:

/* Force 2-column layout for product pages on mobile */
@media (max-width: 767px) {
  /* Container for product details and images */
  .ProductItem-details,
  .ProductItem-gallery {
    width: 50%;
    float: left;
    box-sizing: border-box;
  }

  /* Ensure images stay contained within their area */
  .ProductItem-gallery img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Clear floats after gallery and details */
  .ProductItem-details:after, .ProductItem-gallery:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* Adjust product description to fit into the half-column */
  .ProductItem-details {
    padding: 10px;
  }

  /* Optional: Ensure dropdowns and other content don't overflow */
  .ProductItem-details select,
  .ProductItem-details input,
  .ProductItem-details button {
    width: 100%;
  }
}

Additional Adjustment for Color Selection Image Switching on Mobile:

Add below code to pages > web tools > custom css:

/* Highlight the current selected color image */
.ProductItem-gallery img.active {
  border: 2px solid #000; /* Example: black border for active image */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

Thank you so much! This worked great and I see the two columns now - however, the product description and everything still gets pushed down below the image gallery. Is there any way to get it to appear side by side with the images, like the product name does? 

15 hours ago, HeatherCL said:

Is there a way to force mobile product pages to  maintain the desktop  2-column layout?

 I have some products with lots of product photos and it takes forever to scroll through them on mobile to reach the product information.

Rather than using code, have you considered using a different layout for your Product Detail Page (PDP), so that images don't use up vertical height on mobile devices? For example, they can be stacked and scrolled left/right 🙂.

Did this help? Please give feedback by clicking an icon below  ⬇️

@paul2009 Thanks for the suggestion! I am still on Squarespace 7.0 so I don't think that feature is available to me until I migrate to 7.1 - which I should probably do at some point, I'm just putting it off since I'd have to redo my site as a whole. 

4 hours ago, HeatherCL said:

I am still on Squarespace 7.0 so I don't think that feature is available to me until I migrate to 7.1

Ah I see. On version 7.0 you can choose the Design: Slideshow option in Site Styles, but it's a tradeoff because it will affect both mobile and desktop pages, so you'd lose the stacked look on desktop.