Button Hidden on Mobile Screen
A button that is visible and functional on desktop is not rendered, is clipped, or is overlapped by another element on narrow mobile viewports. Users on phones cannot find or tap the button and cannot complete the action it triggers.
MediumBeginnerManual testingExploratory testingResponsive testing
// UNDERSTAND
// Symptoms
- The Submit Order button does not appear at 375 px viewport width
- The button is present in the DOM but visually hidden behind another element
- Tapping the area where the button should be on a mobile device has no effect
- The layout looks correct on desktop (1280 px) but breaks at 375 px
- A horizontal scrollbar appears on narrow screens, hiding the button outside the viewport
// Root Cause
- The button uses a fixed CSS right offset (e.g. right: 16px) combined with absolute positioning and a fixed-width parent, causing it to overflow the viewport at 375 px wide
- A parent container has overflow: hidden set without a responsive max-width, clipping child elements — including the button — below a certain breakpoint
- The responsive breakpoint CSS incorrectly applies display: none at the mobile breakpoint when the rule was intended only for a different element in the same selector group
// Where It Appears
- Checkout and order confirmation pages with floating action buttons
- Modal dialogs with footers that are not scrollable on small screens
- Form pages where submit buttons are positioned relative to a fixed-width container
- Navigation bars with action buttons that overflow on narrow viewports
- Card footers where buttons are laid out in a row that wraps unexpectedly
// REPRODUCE & TEST
// How to Reproduce
- 01Open Chrome DevTools and activate the Device Toolbar (Ctrl+Shift+M / Cmd+Shift+M)
- 02Set the viewport width to 375 px and height to 812 px (iPhone SE / iPhone 12 dimensions)
- 03Navigate to the order confirmation page at /orders/checkout
- 04Scroll the full page from top to bottom
- 05Look for the Submit Order button and observe whether it is visible and tappable
- 06Toggle the viewport to 1280 px wide and confirm the button is visible on desktop
// Test Data Needed
- A user account with an item in the cart so the checkout page loads
- A browser with DevTools responsive mode or a real mobile device
// Manual Testing Ideas
- Test on multiple viewport widths: 375 px, 390 px, 430 px (iPhone models), 768 px (tablet), and 1280 px (desktop)
- Test on a real iOS and Android device in addition to browser emulation
- Use DevTools Inspect to check whether the button element is in the DOM; if it is, check its computed CSS properties (display, visibility, z-index, overflow of parent)
- Toggle between portrait and landscape on the mobile device to check both orientations
- Scroll horizontally (if possible) to see whether the button is off-screen to the right
- Test with browser zoom levels set to 150 % and 200 % on desktop to simulate reduced effective viewport width
// Automation Idea
Write a Playwright or Selenium test that sets the viewport to 375 × 812 px, navigates to /orders/checkout, and asserts the Submit Order button is visible and within the viewport bounds using element.isVisible() and a bounding-box check. Run the same assertion at 390 px, 768 px, and 1280 px to cover common breakpoints. Fail the test if the button's bounding rect is outside the viewport dimensions.
// Expected Result
The Submit Order button is visible and tappable on all supported viewport widths, including 375 px mobile.
// Actual Result (Example)
At 375 px viewport width, the Submit Order button is absent from the visible page. Inspecting the DOM confirms the element exists but its right: 16px offset places it 40 px outside the right edge of the 375 px viewport.
// REPORT IT
Example Bug Report
- Title
- Submit Order button not visible on 375 px mobile viewport at /orders/checkout
- Severity
- Medium
- Environment
- Staging environment Chrome 124 DevTools Responsive Mode Viewport: 375 × 812 px Standard user account with item in cart
- Steps to Reproduce
- 01Log in with a standard user account that has at least one item in the cart
- 02Open Chrome DevTools and set the viewport to 375 × 812 px
- 03Navigate to /orders/checkout
- 04Scroll the full page from top to bottom
- 05Look for the Submit Order button
- Expected Result
- The Submit Order button is visible and tappable at 375 px viewport width.
- Actual Result
- The Submit Order button is not visible at 375 px. The DOM confirms the element is present but its right: 16px absolute position places it outside the viewport boundary.
- Impact
- Mobile users cannot complete a purchase. On devices narrower than approximately 415 px — the majority of phones — the checkout flow is entirely broken.