engineering/make_post_sell
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

fix: consistent section order across mobile, desktop, and cinema modes

Browse source 
Mobile previously placed product-right (price, download, Up Next)
as the 2nd section, right after images — a different reading flow
from desktop and cinema modes, which keep description + comments
above/alongside product-right.

Unified order for every mode and viewport:

  1. images         (sticky video/cover on mobile + desktop watch)
  2. description
  3. comments
  4. product-right  (price, download, Up Next)

Desktop normal: column 1 = images → description → comments (stacked),
column 2 = product-right (spans all rows on the right).

Desktop cinema: row 1 = images full-width, row 2 = content (description
+ comments stack) on the left, product-right on the right.

Mobile normal: all four stacked single-column in that order. Cinema
stays a no-op below 800px; the classes exist but match no rules and
the page falls through to the consistent mobile watch-mode layout.

CLAUDE.md mobile layout section updated to match.
This commit is contained in:
russell@unturf.com 2026-04-23 17:37:45 -04:00
parent 795b845cf9
commit e159d2f2bf
2 changed files with 31 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

16
CLAUDE.md
View file

@ -356,11 +356,19 @@ normal redirect flow on any error.
## Mobile Layout
On mobile (`max-width: 800px`), our product page reorders to single column:
On mobile (`max-width: 800px`), our product page reorders to single column
with the **same section order as desktop and cinema modes** — images first,
then description + comments, then product-right:
1. `product-images` (order 1) — sticky in watch mode
2. `product-right` (order 2) — price, download, related content
3. `product-description` (order 3)
4. `product-comments` (order 4)
2. `product-description` (order 2)
3. `product-comments` (order 3)
4. `product-right` (order 4) — price, download, related content
Cinema mode is a no-op on mobile (gated on `@media (min-width: 800px)`).
The normal watch-mode mobile stack already gives full-viewport-width media
and a consistent section order — the cinema classes exist on the DOM but
match no layout rules below 800px.
Related content on mobile shows only 7 next items (vs 42 on desktop) via `.related-content-overflow` class. A "Comments (N)" anchor link appears on mobile to jump to our comments section below.