Mobile Density UI System v2
Goal
Make mobile layouts compact, scannable, and conversion-friendly without sacrificing readability or touch comfort.
When to use
Use when mobile pages feel too tall, cards are oversized, every section becomes one column, product/service grids create too much scroll, or important content is buried.
Workflow
- Inspect the real content types: products, services, thumbnails, stats, categories, testimonials, CTAs, or form blocks.
- Decide whether each mobile section needs one column, two columns, horizontal scroll, compact cards, accordions, or progressive disclosure.
- Use two-column mobile grids for small product/service/category cards when content and tap targets remain readable.
- Reduce oversized headings, py-20/py-24 spacing, huge images, and card padding that create unnecessary scroll.
- Keep primary CTAs visible and avoid burying purchase or contact actions below decorative content.
- Use CSS grid, flex, container queries, or project utilities according to the existing style system.
- Test breakpoints around 360, 390, 430, 768, 1024, and desktop when possible.
Quality bar
- Check responsive behavior in browser/devtools or by inspecting CSS classes and breakpoints.
- Run available lint/type/build checks.
- Confirm no horizontal overflow or clipped content.
Validation
- Mobile shows more useful content per screen without feeling cramped.
- Tap targets remain usable and text remains readable.
- Two-column mobile grids are used where they improve browsing, not everywhere blindly.
- Hero and section heights are proportional to content.
Final response
- Report mobile density choices and any breakpoints manually verified.
1---2name: mobile-density-ui-system-v23description: Use this when fixing responsive layouts that waste space, especially mobile product grids, service cards, stats, thumbnails, galleries, pricing, or category sections.4---56# Mobile Density UI System v278## Goal910Make mobile layouts compact, scannable, and conversion-friendly without sacrificing readability or touch comfort.1112## When to use1314Use when mobile pages feel too tall, cards are oversized, every section becomes one column, product/service grids create too much scroll, or important content is buried.1516## Workflow17181. Inspect the real content types: products, services, thumbnails, stats, categories, testimonials, CTAs, or form blocks.192. Decide whether each mobile section needs one column, two columns, horizontal scroll, compact cards, accordions, or progressive disclosure.203. Use two-column mobile grids for small product/service/category cards when content and tap targets remain readable.214. Reduce oversized headings, py-20/py-24 spacing, huge images, and card padding that create unnecessary scroll.225. Keep primary CTAs visible and avoid burying purchase or contact actions below decorative content.236. Use CSS grid, flex, container queries, or project utilities according to the existing style system.247. Test breakpoints around 360, 390, 430, 768, 1024, and desktop when possible.2526## Quality bar2728- Check responsive behavior in browser/devtools or by inspecting CSS classes and breakpoints.29- Run available lint/type/build checks.30- Confirm no horizontal overflow or clipped content.3132## Validation3334- Mobile shows more useful content per screen without feeling cramped.35- Tap targets remain usable and text remains readable.36- Two-column mobile grids are used where they improve browsing, not everywhere blindly.37- Hero and section heights are proportional to content.3839## Final response4041- Report mobile density choices and any breakpoints manually verified.
YankielDBC2