Viewport Resize

Test responsive breakpoints

0 × 0px

Tailwind Class

default

Responsive Testing

Test that UI adapts correctly at each breakpoint. Check for overflow, text wrapping, hidden elements, and layout changes. Resize your browser to see breakpoint transitions.

Breakpoint Scale

Device size ranges

Mobile S

0px - 374px

Mobile M

375px - 424px

Mobile L

425px - 639px

Tablet

640px - 1023px

Laptop

1024px - 1439px

Desktop

1440px+

Resize Log

Breakpoint transitions

Resize window to see changes

Tailwind Breakpoints

sm: 640px

md: 768px

lg: 1024px

xl: 1280px

2xl: 1536px

Common Devices

• iPhone SE: 375 × 667
• iPhone 14: 390 × 844
• iPad: 768 × 1024
• MacBook Air: 1440 × 900

Responsive Layout Demo

Grid columns change with viewport

Card 1

1 column2 columns4 columns

Card 2

1 column2 columns4 columns

Card 3

1 column2 columns4 columns

Card 4

1 column2 columns4 columns

↑ This grid shows 1 column on mobile, 2 on tablet (sm:), and 4 on desktop (lg:). Resize to see it change.

Testing Tips

Automation hints

✓ Use page.setViewportSize() in Playwright
✓ Test with device descriptors from @playwright/test
✓ Check for horizontal overflow at small sizes
✓ Verify hidden/visible elements change with breakpoints

Viewport Resize

Test responsive breakpoints

0 × 0px

Tailwind Class

default

Responsive Testing

Test that UI adapts correctly at each breakpoint. Check for overflow, text wrapping, hidden elements, and layout changes. Resize your browser to see breakpoint transitions.

Breakpoint Scale

Device size ranges

Mobile S

0px - 374px

Mobile M

375px - 424px

Mobile L

425px - 639px

Tablet

640px - 1023px

Laptop

1024px - 1439px

Desktop

1440px+

Resize Log

Breakpoint transitions

Resize window to see changes

Tailwind Breakpoints

sm: 640px

md: 768px

lg: 1024px

xl: 1280px

2xl: 1536px

Common Devices

• iPhone SE: 375 × 667
• iPhone 14: 390 × 844
• iPad: 768 × 1024
• MacBook Air: 1440 × 900

Responsive Layout Demo

Grid columns change with viewport

Card 1

1 column2 columns4 columns

Card 2

1 column2 columns4 columns

Card 3

1 column2 columns4 columns

Card 4

1 column2 columns4 columns

↑ This grid shows 1 column on mobile, 2 on tablet (sm:), and 4 on desktop (lg:). Resize to see it change.

Testing Tips

Automation hints

✓ Use page.setViewportSize() in Playwright
✓ Test with device descriptors from @playwright/test
✓ Check for horizontal overflow at small sizes
✓ Verify hidden/visible elements change with breakpoints

Viewport Resize

Responsive Testing

Breakpoint Scale

Resize Log

Tailwind Breakpoints

Common Devices

Responsive Layout Demo

Testing Tips

Timer

Viewport Resize

Responsive Testing

Breakpoint Scale

Resize Log

Tailwind Breakpoints

Common Devices

Responsive Layout Demo

Testing Tips

Timer