Product Details Page: Mobile Layout on Tablet
What You'll Create
A Squarespace product detail page that switches to the stacked mobile layout on tablet-sized screens (768px–1024px). Instead of the default side-by-side arrangement where the gallery and product details compete for limited tablet width, the gallery goes full-width on top with a working carousel, and the product info stacks below — just like on mobile.
The Problem It Solves
Squarespace's product detail page uses a side-by-side layout on tablets, which often looks cramped — the product gallery gets squeezed and the details area becomes too narrow to read comfortably. There's no native setting to switch to a stacked layout at the tablet breakpoint. This CSS-only fix forces the mobile stacking behavior on tablets while preserving the gallery's carousel transitions and navigation controls.
Perfect For
E-commerce stores with large product imagery, Shops using detailed product galleries, Stores targeting tablet shoppers, Product pages with gallery carousels, Retail sites needing consistent mobile-to-tablet experience
What Makes This Different
This is a pure CSS solution that targets the 768px–1024px range specifically, so desktop stays untouched. The product content wrapper switches from horizontal to vertical stacking, and the gallery expands to full width. The carousel slide transitions are fully preserved — including the 0.5-second slide-in and slide-out animations for both forward and backward navigation. The stacked gallery design is also handled, with slides properly layered on top of each other. Carousel navigation controls are explicitly shown so tablet users can browse through product images. The gallery maintains its configured aspect ratio throughout. No JavaScript required — just paste into Custom CSS.
Details
Section Type: Fluid & Classic
Code Type: CSS
Prerequisites: Product Detail page using Simple layout with gallery placement set to Right. Add to Design > Custom CSS.
Toolkit Title: Product Details page: Apply mobile layout to tablet
Learn This Technique
This is one of 150+ code techniques taught inside Standout Squarespace, where you get:
The complete, copy-paste code
Video walkthrough explaining how it works
The principles behind the technique so you can customize it
Access to our private community for support