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.

25
make_post_sell/static/css/common.css
View file

@ -1612,7 +1612,12 @@ textarea.markup-editor-textarea {
padding-right: 4px;
}
/* On mobile, reorder to put purchase section after images */
/* Section order on mobile matches desktop + cinema: images first,
then description, comments, then product-right (price, download,
Up Next). Desktop puts description + comments above/alongside
product-right in both normal and cinema modes; mobile follows
the same reading order so sections stay consistent across every
mode and viewport. */
.product-images {
order: 1;
max-width: 100%;
@ -1627,8 +1632,16 @@ textarea.markup-editor-textarea {
height: auto;
}
section.product-right {
.product-description {
order: 2;
}
.product-comments {
order: 3;
}
section.product-right {
order: 4;
width: 100%;
}
@ -1636,14 +1649,6 @@ textarea.markup-editor-textarea {
margin-top: 30px;
}
.product-description {
order: 3;
}
.product-comments {
order: 4;
}
/* Watch mode mobile: dissolve watch-left wrapper so sticky video sticks
against the full grid container, not just the watch-left box */
.watch-left {