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

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

@ -2630,12 +2630,13 @@ textarea.markup-editor-textarea {
padding-right: 4px;
}
/* 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. */
/* Section order on tablet + phone: images first, then product-right
(price, Add to Cart, Preview, Up Next) so the buy CTA is at the
top — not buried below description + comments. Desktop two-column
keeps product-right as a side panel where the CTA is always
visible alongside the image; mobile lifts it up so a buyer doesn't
have to scroll past the entire description and comment thread to
find the button. */
.product-images {
order: 1;
max-width: 100%;
@ -2650,21 +2651,25 @@ textarea.markup-editor-textarea {
height: auto;
}
.product-description {
order: 2;
}
.product-comments {
order: 3;
}
section.product-right {
order: 4;
order: 2;
width: 100%;
}
section.product-right .well {
margin-top: 30px;
/* Tighten the top margin on mobile — the well now sits directly
under the product image instead of below description + comments,
so it doesn't need the 30px gap that separated it from the
comment thread in the old order. */
margin-top: var(--space-3, 12px);
}
.product-description {
order: 3;
}
.product-comments {
order: 4;
}
/* Watch mode mobile: dissolve watch-left wrapper so sticky video sticks