Skip to content

mobile.md

Latest commit

 

History

History
148 lines (105 loc) · 3.08 KB

mobile.md

File metadata and controls

148 lines (105 loc) · 3.08 KB

Mobile

Responsive design patterns for 320px minimum width.

Core Rules

  1. 320px minimum width. Every feature must be usable on the smallest phones.
  2. 44x44px touch targets. All interactive elements must meet this minimum.
  3. No horizontal scroll. Content must wrap or adapt, never overflow.
  4. Mobile-first CSS. Write base styles for mobile, add complexity with sm:, md:, lg:.

Responsive Layout Patterns

Stack on Mobile, Side-by-Side on Desktop

<div className="flex flex-col lg:flex-row gap-4">
  <div className="lg:w-1/2">{/* Input */}</div>
  <div className="lg:w-1/2">{/* Output */}</div>
</div>

Full Width Inputs

Never constrain input width on mobile:

// Good
<input className="w-full min-w-0" />

// Bad -- may overflow on small screens
<input className="w-96" />

The min-w-0 is critical inside flex containers to prevent overflow.

Touch-Friendly Buttons

// Good -- meets 44px minimum
<button className="min-h-[44px] min-w-[44px] px-4 py-2">
  Submit
</button>

// Bad -- too small for touch
<button className="px-2 py-1 text-xs">
  Submit
</button>

Common Patterns

Date/Time Inputs on Mobile

Native date/time inputs have browser-specific styling. Normalize them:

<input
  type="date"
  className="appearance-none min-h-[44px] min-w-0 w-full rounded-lg border px-3"
/>

Inline Values That Wrap

When displaying multiple values inline, always allow wrapping:

// Good -- wraps naturally
<div className="flex flex-wrap gap-2">
  <span>Value 1</span>
  <span>Value 2</span>
  <span>Value 3</span>
</div>

// Bad -- pushes content off screen
<div className="flex gap-2">
  <span>Very Long Value</span>
  <span>Another Long Value</span>
</div>

Fixed Heights for Variable Content

Banners or status bars with variable text should use fixed heights to prevent layout shift:

// Good -- consistent height regardless of content
<div className="h-10 flex items-center overflow-hidden">
  {statusMessage}
</div>

// Bad -- height changes based on text length, pushing content around
<div className="py-2">
  {statusMessage}
</div>

Breakpoints

The template uses Tailwind's default breakpoints:

Prefix Min Width Typical Device
(none) 0px Phones (320px+)
sm: 640px Large phones, small tablets
md: 768px Tablets
lg: 1024px Laptops
xl: 1280px Desktops

Pattern: Design for the smallest screen first, then add overrides:

<div className="text-sm md:text-base lg:text-lg">
  {/* Starts small, grows with screen */}
</div>

Testing Mobile

useMediaQuery Hook

import { useMediaQuery } from '../hooks/useMediaQuery';

function MyFeature() {
  const isDesktop = useMediaQuery('(min-width: 1024px)');

  return isDesktop ? <DesktopLayout /> : <MobileLayout />;
}

Browser DevTools

  1. Open Chrome DevTools (F12)
  2. Toggle Device Toolbar (Ctrl+Shift+M)
  3. Select "iPhone SE" (375px) or set custom 320px
  4. Test all interactive elements are reachable and usable