Responsive Design

Fidus is mobile-first and fully responsive. Our design system adapts seamlessly from smartphones to desktop displays, ensuring optimal user experience at every screen size.

Breakpoints

We use Tailwind CSS's standard breakpoint system:

sm640px and up

Small tablets, large phones (landscape)

md768px and up

Tablets (portrait)

lg1024px and up

Tablets (landscape), small laptops

xl1280px and up

Desktop monitors

2xl1536px and up

Large desktop monitors

Mobile-First Approach

We design for mobile first, then progressively enhance for larger screens. This ensures the core experience works everywhere.

// Mobile first (no prefix)
<div className="p-md text-sm">

// Then enhance for larger screens
<div className="p-md md:p-lg lg:p-xl text-sm md:text-base">

// Grid: 1 column mobile, 2 tablet, 3 desktop
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-md">

Interactive Responsive Demo

Resize your browser window or use DevTools device emulation to see how this layout adapts across breakpoints:

Mobile: 1 Column

Full width on phones (default, no breakpoint prefix)

Tablet: 2 Columns

Side-by-side on tablets (md:grid-cols-2 at 768px+)

Desktop: 3 Columns

Optimized for large screens (lg:grid-cols-3 at 1024px+)

Responsive Patterns

Grid Layout

Automatic responsive columns:

// Grid component with auto-responsive columns
<Grid cols="3">  // 1 col mobile, 2 tablet, 3 desktop
  <Card>...</Card>
  <Card>...</Card>
  <Card>...</Card>
</Grid>

// Manual control
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-md">

Stack Direction

Change layout orientation at breakpoints:

// Vertical on mobile, horizontal on tablet+
<Stack
  direction="vertical"
  className="md:flex-row"
>
  <Button>Primary</Button>
  <Button>Secondary</Button>
</Stack>

Container Max-Width

Content containers adapt to screen size:

<Container size="lg">  // max-w-6xl
  // Automatically adds padding and centers
  <OpportunityCard>...</OpportunityCard>
</Container>

Visibility Classes

Show/hide elements at specific breakpoints:

// Hidden on mobile, visible on md+
<div className="hidden md:block">
  Desktop navigation
</div>

// Visible on mobile, hidden on md+
<button className="md:hidden">
  Mobile menu
</button>

Typography Scale

Text sizes adjust for readability:

text-sm14pxBody text mobile

md:text-base16pxBody text desktop

text-xl md:text-2xl20px → 24pxHeadings

Spacing Scale

Padding and margins adjust at breakpoints:

// Tighter spacing mobile, more generous desktop
<div className="p-md md:p-lg lg:p-xl">

// Gap between elements
<Stack spacing="sm" className="md:gap-md lg:gap-lg">

Component Adaptations

OpportunityCard

Mobile: Full width, swipe-to-dismiss

Desktop: Max-width constrained, X button to close

Navigation

Mobile: Hamburger menu, bottom tab bar

Desktop: Sidebar navigation, top header

Forms

Mobile: Full-width inputs, vertical button stack

Desktop: Multi-column layouts, horizontal button groups

Tables

Mobile: Card-based layout (stacked cells)

Desktop: Traditional table with columns

Touch vs. Mouse

Touch Targets

Minimum 44x44px for touch interfaces:

// Ensure adequate spacing for touch
<button className="min-h-[44px] min-w-[44px] p-sm">
  <Icon className="h-5 w-5" />
</button>

Hover States

Only apply hover styles on devices that support hover:

// Hover only on devices with hover capability
<button className="hover:bg-primary/90 active:bg-primary/80">
  // active state for touch devices
</button>

Testing Responsive Design

Browser DevTools

1. Open Chrome/Firefox DevTools (F12)

2. Toggle device toolbar (Ctrl/Cmd + Shift + M)

3. Test common device sizes:

• iPhone SE (375px)
• iPhone 14 Pro (393px)
• iPad (768px)
• Desktop (1280px, 1920px)

Device Preview Examples

Common device viewports to test. Use these dimensions in DevTools device emulation:

📱 Mobile Phones (Portrait)

iPhone SE (2022)375 × 667

iPhone 14 Pro393 × 852

Samsung Galaxy S23360 × 780

Google Pixel 7412 × 915

📱 Mobile Phones (Landscape)

iPhone 14 Pro (landscape)852 × 393

Samsung Galaxy S23 (landscape)780 × 360

💻 Tablets

iPad Mini (portrait)768 × 1024

iPad Air (portrait)820 × 1180

iPad Pro 11" (portrait)834 × 1194

iPad Pro 12.9" (landscape)1366 × 1024

🖥️ Desktop & Laptop

MacBook Air 13"1280 × 832

MacBook Pro 14"1512 × 982

Full HD Monitor1920 × 1080

4K Monitor3840 × 2160

Real Devices

Always test on actual devices when possible:

iOS Safari (different rendering than Chrome)
Android Chrome
Tablet (different touch patterns than phone)

Responsive Testing Checklist

Use this checklist to ensure your responsive design works correctly across all devices:

Mobile (375px - 640px): Test on iPhone SE, ensure touch targets are 44x44px minimumTablet Portrait (768px - 1024px): Verify 2-column layouts, navigation adaptsTablet Landscape (1024px+): Check 3-column grids, sidebar visibilityDesktop (1280px+): Full layout, all features visible, hover states workingLarge Desktop (1920px+): Content max-width enforced, no excessive whitespaceOrientation Changes: Test portrait → landscape transitions on mobile/tabletTouch Interactions: Swipe gestures work, buttons have adequate spacingTypography: Text is readable at all sizes, line-height appropriateImages & Media: Images scale properly, no horizontal scrollingForms: Input fields accessible, virtual keyboard doesn't obscure inputsNavigation: Mobile menu works, desktop sidebar visible, transitions smoothPerformance: Loads quickly on mobile networks, no layout shift (CLS)

Performance Considerations

Mobile Performance

Optimize images for mobile (WebP, smaller sizes)
Lazy load below-the-fold content
Minimize JavaScript bundle size
Use server-side rendering (Next.js)
Implement proper caching strategies

Network Conditions

Design for varying network speeds:

Show loading states immediately

Implement optimistic UI updates

Cache data locally when possible

Provide offline fallbacks

Best Practices

✓ Do

• Design mobile-first
• Test on real devices
• Use semantic breakpoints
• Optimize for touch
• Consider network speed
• Progressive enhancement

✗ Don't

• Assume desktop-only usage
• Use device-specific CSS
• Rely solely on hover
• Ignore portrait orientation
• Create separate mobile site
• Block content on small screens

Example: Responsive Card Grid

<Container size="lg" className="py-md md:py-lg lg:py-xl">
  <Grid
    cols="3"  // Auto: 1 mobile, 2 tablet, 3 desktop
    gap="md"  // Responsive gap sizes
  >
    {opportunities.map(opp => (
      <OpportunityCard
        key={opp.id}
        title={opp.title}
        urgency={opp.urgency}
        className="text-sm md:text-base"  // Responsive text
      >
        {opp.content}
      </OpportunityCard>
    ))}
  </Grid>
</Container>

Resources

Key Takeaways

✅ Mobile-first design approach (default styles, then enhance)
✅ Standard breakpoints: sm(640) md(768) lg(1024) xl(1280) 2xl(1536)
✅ Touch targets minimum 44x44px for mobile devices
✅ Test on real devices regularly, not just DevTools
✅ Progressive enhancement from mobile to desktop
✅ Optimize images and performance for mobile networks
✅ Use responsive utility classes (md:, lg:, xl:)
✅ Consider both portrait and landscape orientations
✅ Test all breakpoints with comprehensive checklist
✅ Use device-specific viewports (iPhone, iPad, etc.)