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

style: mobile — promote buy CTA above description + comments

Browse source 
Tablet/phone buyers had to scroll past the entire description and
comment thread to find Add to Cart. Desktop two-column has always kept
product-right visible as a side panel; this mobile rule mirrors that
intent.

New order on `@media (max-width: 800px)`:

  1. product-images      (sticky in watch mode)
  2. product-right       (price, Add to Cart, Preview, Up Next)  ← was 4
  3. product-description (was 2)
  4. product-comments    (was 3)

Also tightens product-right .well top margin from 30px → space-3 since
it no longer needs to separate from a comment thread above.
CLAUDE.md Mobile Layout doc updated to match.
This commit is contained in:
russell@unturf.com 2026-05-15 10:25:45 -04:00
parent d86372c288
commit 95d297ae8a
No known key found for this signature in database
2 changed files with 28 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

12
CLAUDE.md
View file

@ -389,13 +389,15 @@ normal redirect flow on any error.
## Mobile Layout
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:
with the **buy CTA promoted up** so a tablet/phone buyer doesn't have to
scroll past the description and comment thread to find Add to Cart.
Desktop two-column already keeps `product-right` visible as a side panel;
this mobile rule mirrors that intent:
1. `product-images` (order 1) — sticky in watch mode
2. `product-description` (order 2)
3. `product-comments` (order 3)
4. `product-right` (order 4) — price, download, related content
2. `product-right` (order 2) — price, Add to Cart, Preview, related content
3. `product-description` (order 3)
4. `product-comments` (order 4)
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