Testing Responsiveness Across Breakpoints

Building responsive layouts is only half the work. Testing them properly ensures they actually work for real users on real devices. Let’s explore testing strategies and common issues to watch for.

Browser DevTools

Every modern browser has responsive design tools built in.

Chrome DevTools

1. Open DevTools (F12 or Cmd+Option+I)
2. Click the device toggle icon (or Cmd+Shift+M)
3. Select a device preset or set custom dimensions

Useful features:

• Device presets (iPhone, iPad, Pixel, etc.)
• Throttling (simulate slow connections)
• Touch simulation
• Orientation toggle
• Custom device profiles

Firefox DevTools

1. Open DevTools (F12)
2. Click the Responsive Design Mode icon (Cmd+Shift+M)
3. Drag the viewport or use presets

Unique features:

• Multiple viewport sizes at once
• Screenshot at different sizes
• Touch simulation

Key Breakpoints to Test

Don’t just test device presets. Test the transitions between breakpoints:

Testing the “Weird” Widths

Drag the viewport slowly between breakpoints. Look for:

• Awkward spacing
• Text that suddenly jumps
• Elements that overflow
• Images that distort

     320     480     768     1024    1280
      |-------|-------|-------|-------|
            ^     ^     ^
         Test these transitions

Common Responsive Issues

Horizontal Overflow

The most common problem. Content wider than the viewport causes horizontal scroll.

How to find it:

/* Temporarily add to find overflow */
* {
  outline: 1px solid red;
}

Or in DevTools console:

document.querySelectorAll('*').forEach((el) => {
  if (el.scrollWidth > el.clientWidth) {
    console.log('Overflow:', el);
  }
});

Common causes:

• Fixed-width elements
• Long unbroken strings (URLs, emails)
• Images without max-width
• Tables
• Pre-formatted code

Fixes:

/* Prevent image overflow */
img {
  max-width: 100%;
  height: auto;
}

/* Break long words */
.content {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Hide overflow if needed */
.container {
  overflow-x: hidden;
}

Touch Target Size

Buttons and links should be at least 44x44px for touch:

/* Ensure minimum tap target */
.button,
.nav-link {
  min-height: 44px;
  min-width: 44px;
  padding: var(--spacing-sm) var(--spacing-md);
}

/* For inline links, add padding */
.content a {
  padding: 4px 0;
  margin: -4px 0;
}

Font Size Readability

Text should be readable without zooming:

/* Minimum 16px for body text */
body {
  font-size: 16px;
  line-height: 1.5;
}

/* Inputs need 16px to prevent iOS zoom */
input,
select,
textarea {
  font-size: 16px;
}

Spacing Consistency

Mobile spacing should feel balanced, not cramped:

/* Reduce spacing on mobile, don't eliminate it */
.section {
  padding: var(--spacing-lg) 0;
}

@media (min-width: 768px) {
  .section {
    padding: var(--spacing-2xl) 0;
  }
}

Real Device Testing

DevTools simulate devices but can’t replicate everything.

What You Miss in Simulation

• Actual touch behavior
• Performance on real hardware
• Browser quirks (Safari vs Chrome)
• Viewport handling (address bar, notches)
• Haptic feedback

Testing Options

Your own devices:

• Connect phone to computer
• Use browser sync (localhost over network)
• Safari Web Inspector for iOS
• Chrome remote debugging for Android

BrowserStack or LambdaTest:

• Real devices in the cloud
• Multiple browsers and OS versions
• Screenshots and recordings

Physical device lab:

• Keep old devices for testing
• Test on both iOS and Android
• Include different screen sizes

Local Testing on Devices

# Get your local IP
ipconfig getifaddr en0  # Mac
ipconfig  # Windows

# Access your dev server from phone
# http://192.168.1.100:9292

Or use Shopify CLI’s built-in tunneling:

shopify theme dev --store your-store
# Provides a URL accessible from any device

Testing Checklist

Run through this checklist at each major breakpoint:

Layout

• No horizontal scrolling
• Content fills width appropriately
• Grid columns stack correctly
• Images resize properly
• Spacing feels balanced

Navigation

• Menu is accessible (hamburger on mobile)
• Dropdowns work
• All links are reachable
• Touch targets are large enough

Typography

• Text is readable (16px+ body text)
• Headings scale appropriately
• Line length isn’t too long (max ~75 characters)
• Long words don’t overflow

Images

• Images don’t stretch or distort
• Alt text is present
• Loading is lazy where appropriate
• srcset provides right sizes

Forms

• Inputs are large enough to tap
• Labels are visible
• Error messages display properly
• Keyboard doesn’t cover inputs

Interactive Elements

• Buttons are easy to tap
• Hover states have touch equivalents
• Modals/drawers work correctly
• Scroll is smooth

Debugging Tips

Using DevTools Effectively

Element inspection:

1. Right-click → Inspect
2. See computed styles
3. Check box model (margin, padding)

Finding layout issues:

1. Select an element
2. Look at the “Computed” tab
3. Check for unexpected widths

Testing CSS changes:

1. Edit styles in DevTools
2. See changes live
3. Copy working CSS to your files

Common CSS Debugging

/* Visual debugging */
* {
  outline: 1px solid rgba(255, 0, 0, 0.2);
}

/* Find the overflow */
.container {
  overflow-x: hidden; /* Hides the symptom */
}

/* Better: find and fix the cause */
.problematic-element {
  max-width: 100%;
  box-sizing: border-box;
}

Shopify Preview Limitations

The theme editor preview can behave differently than the live store:

• Editor adds extra DOM elements
• Some JavaScript may not run
• Cache behaves differently

Test on:

• Preview link from theme editor
• Development store
• Live store (with test products)

Responsive Design Best Practices

Mobile-First CSS

Write base styles for mobile, enhance for larger screens:

/* Mobile first */
.grid {
  display: grid;
  gap: 1rem;
}

/* Add columns as space allows */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

Fluid Design

Use relative units and let elements adapt:

/* Fluid container */
.container {
  width: 100%;
  max-width: 1200px;
  padding: 0 clamp(1rem, 3vw, 2rem);
  margin: 0 auto;
}

/* Fluid typography */
h1 {
  font-size: clamp(1.75rem, 5vw, 3rem);
}

Content Priority

Decide what’s most important on each screen size:

/* Show secondary content only on larger screens */
.sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .sidebar {
    display: block;
  }
}

/* Or rearrange order */
.main-content {
  order: 1;
}

.sidebar {
  order: 2;
}

@media (min-width: 1024px) {
  .main-content {
    order: 2;
  }

  .sidebar {
    order: 1;
  }
}

Practice Exercise

Test your theme’s footer across these widths:

1. 320px: Does everything fit?
2. 640px: Is the transition to 2 columns smooth?
3. 1024px: Does the full layout appear?
4. 1440px: Is content contained properly?

Document any issues you find and fix them.

Key Takeaways

1. Use DevTools for quick responsive testing
2. Test breakpoint transitions, not just device sizes
3. Check for horizontal overflow (the most common issue)
4. Ensure 44px+ touch targets on mobile
5. Test on real devices when possible
6. 16px minimum for readable body text
7. Run through a checklist at each breakpoint
8. Mobile-first CSS leads to cleaner code

Module Complete!

Congratulations on completing Module 8! You now know how to build a complete footer with dynamic columns, social links, policies, payment icons, and proper accessibility. You also have the testing skills to ensure it works across all devices.

Next up: Module 9: Collection Pages and Merchandising Controls where you’ll build product listing pages.