Mobile Responsiveness Test
This page demonstrates all the mobile-responsive features and utilities implemented across the CirclePay application.
Device Type
desktop
Current device classification
Orientation
portrait
Screen orientation
Touch Device
No
Touch capability
Breakpoint
lg
Current breakpoint
Responsive Buttons
Buttons that adapt to different screen sizes
Responsive Grid
Grid layouts that adapt to screen size
Item 1
Responsive grid item
Item 2
Responsive grid item
Item 3
Responsive grid item
Item 4
Responsive grid item
Item 5
Responsive grid item
Item 6
Responsive grid item
Item 7
Responsive grid item
Item 8
Responsive grid item
Responsive Typography
Text sizes that scale with screen size
Responsive Heading
This paragraph text scales from small on mobile to large on desktop screens.
Smaller text that also scales appropriately across different devices.
Responsive Spacing
Spacing utilities that adapt to screen size
Responsive padding example
Responsive margin example
Mobile-First Utilities
Custom CSS utilities for responsive design
Grid Item 1
Grid Item 2
Grid Item 3
Touch-Friendly Design
Elements optimized for touch devices
Touch targets are at least 44x44px for better mobile usability