Responsive Design Testing

A hotel booking site launches its redesign. It looks great on laptops and on phones. Then the support tickets start: “How do I log in on my iPad?” Testers had checked a phone (393px wide) and a laptop (1280px wide). Nobody checked an older iPad held upright, which is exactly 768px wide. At that one width, the desktop menu disappears and the mobile hamburger button doesn’t appear yet. No menu, no Sign in, no bookings.

Layouts don’t break at the sizes everyone tests. They break in between. That’s why responsive designResponsive designA website layout that adapts to different screen sizes, from phones to large monitors.Open in glossary → needs its own kind of testing.

Why it matters

• Most traffic is mobile. For many shops, banks and delivery services, more than half of all visits come from phones.
• One page, endless sizes. The same URL must work on a 320px phone, a tablet in both orientations, a laptop and a 4K monitor.
• Bugs hide between devices. A layout can be perfect at 375px and 1280px and broken at 900px, the width of a small laptop window or a tablet in landscape.
• It’s an accessibility topic too. People who zoom to 200% or enlarge the text get the mobile layout on a desktop. If it breaks, they’re locked out.

The core concepts

The viewport

The viewportViewportThe visible area of a web page in the browser window or on the device screen.Open in glossary → is the area of the browser where the page is shown. Its width is measured in CSS pixels, not physical screen pixels. An iPhone 15 has a screen 1179 physical pixels wide, but its viewport is 393 CSS pixels wide: each CSS pixel is drawn with 3×3 physical pixels to keep text sharp.

For a phone browser to use that real width, the page needs one line in its HTML <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Breakpoints

A breakpointBreakpointA screen width where a responsive layout changes, for example from one column to two.Open in glossary → is a width where the layout changes, for example from one column to two. Developers write them as media queries in CSS:

/* From 768px and wider: show the navigation links */
@media (min-width: 768px) {
  .nav-links { display: flex; }
  .hamburger { display: none; }
}

Every team chooses its own breakpoints. These common values (they’re Tailwind CSS defaults) are used in this lesson’s demos:

Name	Applies from	Typical screens
base	0px	Phones in portrait (320–430px)
sm	640px	Large phones in landscape, small tablets
md	768px	Tablets in portrait (768–834px)
lg	1024px	Tablets in landscape, small laptops
xl	1280px	Laptops and desktops

Mobile-first

Most modern sites are built mobile-first: the base styles are for the smallest screen, and min-width media queries add layout for bigger screens. The older desktop-first approach starts with the desktop and uses max-width queries to remove things for smaller screens.

Why should a tester care? Because mixing the two is a classic source of off-by-one errorsOff-by-one errorA bug where a count or boundary is wrong by exactly one, like counting days instead of nights.Open in glossary →. Look at this:

.nav-links { display: none; }
.hamburger { display: none; }

@media (min-width: 769px) { .nav-links { display: flex; } }   /* 769 and wider */
@media (max-width: 767px) { .hamburger { display: block; } }  /* 767 and narrower */

At exactly 768px, neither rule applies, and the page has no navigation at all. This is the bug from the hotel story, and it’s why you use boundary value analysisBoundary value analysisTesting values at and just around the edges of valid ranges, where bugs love to hide.Open in glossary →: test at, just below and just above every breakpoint.

Fluid vs fixed layouts

Layout	How it works	What to watch for
Fixed	Elements have set widths in pixels (width: 960px)	Horizontal scrolling on small screens, empty space on big ones
Fluid	Widths are percentages of the screen (width: 50%)	Elements get absurdly wide or squashed at the extremes
Responsive	Fluid layout plus breakpoints where the design changes	Bugs at and between the breakpoints

Most real sites are responsive, with a few fixed-width parts mixed in. Those fixed parts (a table, an image, a hero text box) are where layouts usually break.

Try it: resize a page

Below is a sample outdoor shop inside a pretend browser. Drag the slider or the handle next to the page, try the device presets and watch the layout change. The ruler marks the breakpoints, and the panel at the bottom tells you which layout rules are active.

Viewport resizer

Drag the slider (or the handle next to the page) and watch the layout change at each breakpoint.

Viewport widthpxbase (< 640)

64076810241280

iPhone SE (1st) 320Galaxy S 360iPhone 15 393iPad 9.7″ 768iPad Air 820Laptop 1280Desktop 1440

base < 640sm ≥ 640md ≥ 768lg ≥ 1024xl ≥ 1280

Fit to box100% (scroll)

100200300393

trailhead.example.com

Autumn Sale: up to 40% off · Free shipping over $75

Trailhead

Autumn collection

Sleep under a sky full of stars

Lightweight tents and packs for your next weekend in the mountains. Up to 40% off this week.

Shop the sale

Bestsellers

Ridge 2P Tent

$249Add

Summit 35L Pack

$139Add

Trail Runner GTX

$165Add

Lumen 400 Headlamp

$45Add

Ember Stove

$79Add

Baseplate Compass

$29Add

Compare tents

Ridge 2P$249

Sleeps 2 · 1.6 kg · 3-season

Dome 3P$319

Sleeps 3 · 2.4 kg · 3-season

Storm 2P$449

Sleeps 2 · 2.9 kg · 4-season

Ultra 1P$289

Sleeps 1 · 0.9 kg · 3-season

Layout at 393px (base)

Navigation

Hamburger menu md

Search field

Hidden lg

Hero

Image above text md

Product grid

2 columns md / lg

Compare tents

Stacked cards sm

Footer

1 column md

What to test

Layout and navigation

• Navigation collapses into a hamburger (or tab bar) on small screens, and the menu opens, closes and scrolls.
• No horizontal scrolling at any width from 320px up. Nothing sticks out to the right.
• Grids change columns sensibly. No orphaned single cards, no squashed columns.
• Sticky headers and banners don’t eat the screen. On a small phone, a sticky header plus a cookie banner plus a promo bar can cover half the viewport.

Content

• Tables turn into cards or scroll inside their own box instead of widening the whole page.
• Images keep their aspect ratio (no stretching or squashing) and aren’t blurry on large screens.
• Text wraps nicely. Long words, emails and URLs don’t overflow (try a German product name).
• Nothing overlaps: text on top of images, buttons on top of each other.

Interaction

• Touch targetsTouch targetThe area of the screen that responds to a tap, which should be large enough for a finger.Open in glossary → are big enough on mobile: at least 44×44 pt on iOS and 48×48 dp on Android, with space between them. (For websites, WCAG 2.2 sets a lower minimum of 24×24 CSS px, criterion 2.5.8.)
• No hover-only features. Menus, tooltips and “quick view” buttons that need a mouse hover are unusable on touch screens.
• Forms work with the on-screen keyboard: the focused field isn’t hidden behind it, and the right keyboard type shows.

The edges

• Smallest supported width: 320px (older and small phones, split-screen on tablets).
• Landscape phones: about 650–930px wide but only 320–430px tall. Sticky headers and modals often don’t fit. (See also orientationOrientationWhether the device is held upright (portrait) or sideways (landscape).Open in glossary → and Orientation and Screen Sizes.)
• Zoom and text size: zoom the browser to 200% and 400%, and increase the text size. WCAGWCAGThe Web Content Accessibility Guidelines, the main international standard for accessibility.Open in glossary → requires content to reflow at a width of 320 CSS px (that’s a 1280px screen at 400% zoom) without scrolling in two directions, and text must work at 200% size without losing content. More in Accessibility Basics.
• Very large screens: 1920px and 2560px. Is the content centered with a sensible max width? Are lines of text too long to read? Are images stretched?

Common bugs

#	Bug	What you see	Typical severity
1	Gap at a breakpoint	At exactly one width (often 768 or 1024px) the menu or a section disappears	High
2	Horizontal scroll	The page wiggles sideways on phones; content is cut off on the right	Medium–High
3	Wide table	A table forces the whole page to be wider than the screen	Medium
4	Hover-only menu	A dropdown can’t be opened on a phone or tablet	High
5	Overlapping content	Text runs over an image or another element between two breakpoints	Medium
6	Content below the fold	Sticky banners and headers push the main button out of view on small phones	Medium
7	Stretched or blurry images	Product photos lose their proportions or look pixelated on wide screens	Low–Medium
8	Tiny touch targets	Links and icons too small or too close together to tap reliably	Medium
9	Broken at 200% zoom	Text overlaps or gets cut off; buttons disappear	High (for affected users)
10	Missing meta viewport	The phone shows a tiny desktop page	High

Find the bug

The Trailhead shop below has six responsive bugs. Use the resizer like a real tester:

• Try every preset, then type exact widths like 767, 768 and 769.
• Drag slowly from wide to narrow and watch for jumps and overlaps.
• Switch the input to Touch and try every menu.
• Check what’s visible when the page loads on a small phone, then scroll.

🐞 Bug hunt: Responsive outdoor shop

This demo has 6 hidden bugs. Explore it like a tester, then check your findings.

Found0/6

Viewport widthpxxl (≥ 1280)

64076810241280

iPhone SE (1st) 320Galaxy S 360iPhone 15 393iPad 9.7″ 768iPad Air 820Laptop 1280Desktop 1440

base < 640sm ≥ 640md ≥ 768lg ≥ 1024xl ≥ 1280

Mouse Touch

Fit to box100% (scroll)

Reload page

200400600800100012001280

trailhead.example.com

Autumn Sale: up to 40% off · Free shipping over $75

Trailhead

Search gear…

Autumn collection

Sleep under a sky full of stars

Lightweight tents and packs for your next weekend in the mountains. Up to 40% off this week.

Shop the sale

Bestsellers

Ridge 2P Tent

$249Add

Summit 35L Pack

$139Add

Trail Runner GTX

$165Add

Lumen 400 Headlamp

$45Add

Ember Stove

$79Add

Baseplate Compass

$29Add

Alpine Day Pack

$89Add

Dome 3P Tent

$319Add

Compare tents

Model	Sleeps	Weight	Season	Price
Ridge 2P	2	1.6 kg	3-season	$249
Dome 3P	3	2.4 kg	3-season	$319
Storm 2P	2	2.9 kg	4-season	$449
Ultra 1P	1	0.9 kg	3-season	$289

Tip: switch to 100% (scroll) to see wide layouts at real size. In Touch mode there is no hover, just like on a phone or tablet.

1. 1

   Hint: Test exactly at the md breakpoint, not just around it.

   At exactly 768px there is no navigation at all

   At 767px you get the hamburger and at 769px the desktop links, but at 768px you get neither. The developer used > 768 for the links and < 768 for the hamburger. Expected: exactly one navigation at every width. A classic off-by-one error at a boundary, and 768px is a real iPad width.

   Reveal answer✓ I found this
2. 2

   Hint: Pick a phone width and scroll down to "Compare tents".

   Tent table makes the whole page scroll sideways on phones

   The table has a fixed minimum width of 600px, so below 640px it pushes the page wider than the viewport. The Price column is cut off, and the whole page, header included, scrolls horizontally. Expected: no horizontal page scroll; the table turns into cards or scrolls inside its own container.

   Reveal answer✓ I found this
3. 3

   Hint: Choose the iPad Air preset, switch the input to Touch and try to open Categories.

   "Categories" menu can't be opened on touch devices

   The menu only opens on mouse hover. Tablets wide enough for the desktop nav have no hover, and tapping does nothing (it's not even a button, so keyboard users can't open it either). Expected: the menu opens on tap/click and with the keyboard.

   Reveal answer✓ I found this
4. 4

   Hint: Drag the slider slowly between 850 and 1050px and watch the big headline.

   Hero text overlaps the image between 900 and 999px

   In this range the hero text box has a fixed width of 600px while the image takes the right half of the screen, so the headline and button run over the image. At 899px and at 1000px it looks fine, so testing only device presets misses it. Expected: text and image never overlap at any width.

   Reveal answer✓ I found this
5. 5

   Hint: At 360 or 393px, look for the "Shop the sale" button without scrolling. Then scroll down.

   On small phones the main button is pushed below the fold

   A tall sticky promo banner plus the sticky header take more than a third of the screen, so the main call to action starts below the visible area. While scrolling, the banner keeps covering content and can't be closed. Expected: the main button is visible on load; banners are short, closable and not sticky on small screens.

   Reveal answer✓ I found this
6. 6

   Hint: Compare the product pictures at iPad Air width and at Laptop or Desktop width.

   Product images are stretched on wide screens

   From 1280px the image boxes get a fixed height of 120px while their width keeps growing, and the images don't keep their aspect ratio, so the tent and backpack look squashed and wide. Expected: images keep their proportions (for example with aspect-ratio or object-fit: cover).

   Reveal answer✓ I found this

Notice the screenshots at three widths. For layout bugs, the exact viewport size is part of the steps to reproduce. “On tablet” isn’t enough.

Tools & how-to

Chrome DevTools device mode

Firefox has Responsive Design Mode (Ctrl+Shift+M / Cmd+Option+M), and Safari has Develop › Enter Responsive Design Mode.

Test around every breakpoint

Treat each breakpoint like a boundary in a form field (boundary value analysis). For a breakpoint at 768px, test 767, 768 and 769px. Do the same for every breakpoint the site has, plus the smallest width you support (320px).

Resize slowly

Device presets only show you a handful of widths. Also drag the page width slowly from your widest to your narrowest size and watch for jumps, overlaps, text that suddenly wraps badly, and a horizontal scrollbar appearing.

Zoom and text size

• Browser zoom: Ctrl/Cmd + + up to 200%, then 400%. At 400% on a 1280px window you’re effectively at 320px, so the mobile layout must work.
• Text-only size: Chrome Settings › Appearance › Font size, Safari on iPhone aA › bigger A in the address bar, Firefox View › Zoom › Zoom Text Only.
• Phone settings: larger text in iOS and Android settings affects many mobile websites too.

Real phones and tablets

DevTools is fast for checking layouts, but always confirm on at least one real iPhone and one real Android phone, plus a tablet if your users have them. Real devices show the browser toolbars, the notch and safe areaSafe areaThe part of the screen not covered by the notch, Dynamic Island, rounded corners or home indicator.Open in glossary →, the on-screen keyboard and real touch.

What device mode can’t show you

• It’s still your desktop browser. Choosing “iPhone” in Chrome renders with Chrome’s engine, not Safari’s. (See Cross-browser Testing.)
• No real browser UI: no collapsing toolbar, no notch, no on-screen keyboard pushing the page up.
• Touch is simulated with a mouse. Hover states can still trigger, so hover-only bugs can slip through.
• Not real performance or screens: your laptop is much faster, and colors, brightness and pixel density differ from a real phone.

Example test cases

Checklist

Responsive design testing checklist

0 of 12 checked

Copy

• I know the breakpoints and tested at, just below and just above each one
• The page has a correct meta viewport tag and doesn’t block zoom
• No horizontal scrolling at any width from 320px up
• Navigation works at every width (hamburger on small screens, links on large ones)
• Tables, images and long text adapt without overflowing or overlapping
• Images keep their aspect ratio from phones to 2560px screens
• Touch targets are at least 44×44 pt (iOS) / 48×48 dp (Android)
• Nothing depends on hover: menus and tooltips work with tap and keyboard
• Sticky headers and banners leave enough room on small phones and in landscape
• The main call to action is visible without scrolling on small phones
• Content reflows at 200% and 400% zoom and with larger text
• Results were confirmed on at least one real iPhone and one real Android phone

Check your understanding

Quick quiz

0/5 answered · 0 correct

1. 1.The site has a breakpoint at 1024px. Which widths are the best test values?

   A1000 and 1100pxB1023, 1024 and 1025pxCOnly 1024pxD320 and 1440px

2. 2.On a phone, a website shows a tiny, zoomed-out desktop layout. What is the most likely cause?

   AA missing meta viewport tagBA slow networkCDark modeDA JavaScript error

3. 3.A dropdown menu opens on hover in DevTools device mode, but not on a real iPad. Why might device mode miss this?

   ADevice mode cannot show menusBDevice mode simulates touch with a mouse, so hover can still happenCiPads do not support menusDThe iPad is too slow

4. 4.What does WCAG reflow require?

   AThe site must have a mobile appBContent works at 320 CSS px wide without scrolling in two directionsCEvery page loads in under 2 secondsDImages must be at least 320px wide

5. 5.Which approach finds the most responsive bugs?

   AChecking two device presetsBTesting at the breakpoints, dragging the width slowly, and confirming on real devicesCOnly testing on your own phoneDOnly testing at 1920px

Key takeaways

• The viewport is measured in CSS pixels, and mobile pages need the meta viewport tag (without blocking zoom).
• Breakpoints are where layouts change. Test at, just below and just above each one: that’s where off-by-one bugs hide.
• Most sites are mobile-first; fixed-width parts inside fluid layouts are where things break.
• Test navigation, tables, images, text, touch targets, hover, sticky elements, horizontal scroll, landscape, zoom to 200–400% and very large screens.
• Use DevTools device mode with custom widths and slow resizing, then confirm on real phones and tablets: device mode isn’t a real mobile browser.