The card below is the “product under test”. Use guided mode to see the bug list upfront, or blind mode to find them yourself first.
Techniques: Responsive design testing, Viewport testing
Days Bay, Lower Hutt 5013
New Zealand
Monday – Friday: 7:00 am – 4:00 pm
Saturday – Sunday: 8:00 am – 5:00 pm
Public holidays: 8:00 am – 3:00 pm
0800 100 200
hello@boatshedcafe.example.co.nz
Menu
| Item | Description | Price | Dietary |
|---|---|---|---|
| Eggs Benedict | Free-range eggs, hollandaise, house-made muffin, spinach | $24.00 | GF available |
| Flat White | Double shot, organic milk, latte art | $5.50 | V available |
| Smoked Salmon Bagel | Cream cheese, capers, red onion, dill | $19.50 | — |
| Banana & Walnut Loaf | Warm with butter, maple syrup | $8.00 | V |
Contact us
0800 100 200
hello@boatshedcafe.example.co.nz
@boatshedcafe.example
Your findings
0 / 0 bugs foundTick each bug as you confirm it on the page above. Resize your browser to expose layout breaks. Progress saves automatically.
Write down every bug you find. Be specific — where it is, what’s wrong, what it should be. Resize your browser to trigger responsive issues.
Planted bugs (5)
- The sidebar has a fixed
width:250pxwith no responsive breakpoint. On viewports narrower than ~600px, the sidebar consumes a fixed portion of the width, leaving insufficient space for the main content. Fix: add a media query to collapse to a single column below 768px, or use a flex-basis with flex-shrink. - The menu table has
white-space:nowrapon the table element. On mobile screens, the description column contains long text that refuses to wrap, forcing the table to overflow its container horizontally. Fix: removewhite-space:nowrapand allow text to wrap naturally. - The opening hours paragraphs in the sidebar have
white-space:nowrap. On narrow screens (or when the sidebar collapses), the text “Monday – Friday: 7:00 am – 4:00 pm” exceeds the available width and triggers horizontal scrolling. Fix: removewhite-space:nowrapfrom these paragraphs. - The contact bar cards each have
white-space:nowrap. The email address and Instagram handle are long strings that won't break, causing each card to exceed its intended width. Fix: removewhite-space:nowrapor useoverflow-wrap:break-word. - The contact bar container has
display:flexwith noflex-wrapproperty. On narrow viewports, the three cards are forced into a single row and overflow horizontally. Fix: addflex-wrap:wrapso cards reflow to new rows when space is limited.
Responsive audit technique: open DevTools Device Toolbar and step through 320px, 375px, 480px, 768px, and 1024px. Watch for horizontal scrollbars. In the Computed panel, search for overflow, fixed pixel widths wider than ~300px, and white-space or word-break values. Any hard-coded width wider than the viewport will cause overflow.