The Reality Check: I have spent a significant amount of time and money migrating my store to Horizon, believing it was the future of Shopify’s theme architecture. Instead, I’m now facing the reality of having to move off it entirely.
The Issue: The Samsung Galaxy Fold 7 is not an “edge case.” It is a flagship Android device, and it represents a growing category of premium foldable users. On the Horizon theme, the product page is fundamentally broken.
The Evidence (BrowserStack Verified):
-
I have verified this across multiple sites using BrowserStack.com.
-
Even Shopify’s own official Horizon demos fail on the Fold 7. See screeshots!
-
I contacted Shopify Support 2 months ago. They siad it would be patched soon, never fixed with a patch but temporaliry “fixed” their issues on the demo site.
-
Despite 4 theme updates released since my report, the core issue remains.
The Technical “Ghost Zone”: The Fold 7 has an unfolded width of ~749.7px. Horizon’s CSS Grid appears hard-coded to “snap” at exactly 750px. This 0.3px gap sends the theme into a tailspin where it tries to render a Desktop layout on a screen that physically cannot hold it. The result? Overlapping elements, missing images, and a broken path to purchase.
I have tried the standard fixes (using @media screen and (max-width: 751px) to catch the Fold 7), but Horizon’s “block-first” grid logic is so rigid it ignores the overrides.
My Message to Shopify: Shopify, please stop releasing “AI features” for Horizon until the basic CSS Grid Responsive Logic works for the world’s most popular foldable phones. You are forcing merchants to choose between a “modern” theme and a store that actually allows customers to checkout.
====
CSS stuff I have tried.
My Failed Fixes
I didn’t just give up. I spent hours working through multiple levels of CSS overrides, all of which were ignored or bypassed by Horizon’s internal logic:
1. The “Standard” Breakpoint Fix (Failed) I first tried a simple media query to catch the Fold 7’s 749.7px width. I attempted to force the product media into a single column:
CSS
@media screen and (max-width: 755px) {
.product-information__media { grid-column: 1 / -1 !important; }
}
Result: No change. The theme refused to “snap” into the mobile layout.
2. The “Fluid Grid” Attempt (Failed) I then tried to force a vertical stack by changing the display to block and setting widths to 100%:
CSS
@media screen and (max-width: 1050px) {
.template-product .product-information { display: block !important; width: 100% !important; }
}
Result: The image became “tiny” (shrunken to a small sliver) because the theme’s aspect-ratio math still thought it was in desktop mode.
3. The “Aggressive Hammer” Fix (Failed) Finally, I tried to bypass the theme’s JavaScript calculations by forcing a fixed height of 500px on the deepest possible containers, including the Flickity Viewport and Product Media Wrapper:
CSS
.template-product .flickity-viewport,
.template-product .product-media__wrapper {
height: 500px !important;
min-height: 500px !important;
position: relative !important;
}
*Result: Even with these !important flags, Horizon’s internal scripts continued to inject inline styles that shrunk the image. On a flagship $2,000 phone (Fold 7), the product page is essentially broken and will result in lost sales!
*
