wow-design-wiki/concepts/responsive-design.md

title, description, tags

title	description	tags
Responsive Design Patterns	Mobile-first responsive design for premium websites.	responsive mobile breakpoints grid layout

Responsive Design Patterns

Breakpoint Scale

xs: 0px    — Mobile (default)
sm: 640px  — Large mobile
md: 768px  — Tablet
lg: 1024px — Laptop
xl: 1280px — Desktop
2xl: 1536px — Large desktop
3xl: 1920px — Widescreen

Grid System

Mobile (< 768px)

• 1 column layout
• Full-bleed sections
• Stacked cards
• Hamburger menu

Tablet (768px - 1024px)

• 2 column grid
• Side-by-side cards
• Sticky navigation

Desktop (> 1024px)

• 12-column grid
• Bento grid layouts
• Parallax effects
• Hover interactions

Fluid Typography

font-size: clamp(1rem, 2vw + 0.5rem, 2.5rem);

Fluid Spacing

padding: clamp(1rem, 5vw, 4rem);

Anti-Patterns

• Never use fixed pixel widths for containers
• Never hide content on mobile — restructure instead
• Never ignore touch targets (min 48x48px)
• Never disable scroll animations on mobile