Mobile friendly test fails clickable elements: the 3 spacing checks to fix it

Part of our guide on choosing seo software

Exact pixel measurements and simple checks expose which clickable elements cause mobile usability failures and how to fix them.

Why clickable elements fail the mobile friendly test

Google's mobile friendly test fails when clickable elements such as buttons and links are too close to each other, making it difficult for users to tap accurately on small screens.

This failure usually stems from touch targets that are smaller than the recommended size or that have insufficient spacing between them.

Common causes include tight layouts, inline elements without adequate spacing, or CSS styles that reduce padding or margin.

When Google detects that two or more clickable areas are within less than roughly 48×48 pixels each and spaced less than about 8 pixels apart, it flags the site as having usability issues. We go through seo effects of redirect types step by step elsewhere on the site.

Another factor contributing to clickable elements failing the mobile friendly test is inconsistent scaling across different devices. For example, some devices have higher pixel density, causing elements sized in physical pixels to appear smaller than intended. This discrepancy can cause elements that are large enough on one device to appear too small or too close on another. Hence, designing with CSS pixels and viewport-relative units helps maintain consistent touch target sizes across device types.

It is also important to consider the effect of zoom or user scaling settings. Users increasing font or interface size can cause elements to overlap or crowd together if the layout isn't flexible enough. Testing your site with varied zoom levels or accessibility settings can reveal spacing issues that automated tests might miss, providing a more robust user experience.

• Small buttons or links with less than 48×48 pixel size
• Clickable items placed side by side without enough margin
• CSS resets removing default padding or margin
• Complex layouts that pack multiple links in one line
• Responsive design errors that shrink buttons on mobile

What minimum spacing Google requires between clickable elements

Google's official guideline recommends a minimum touch target size of 48 by 48 pixels on mobile devices, which accounts for an average finger pad size. We go through how to create an audit tool step by step elsewhere on the site.

This size ensures users can tap without accidentally hitting adjacent elements.

The space between click targets should ideally be at least 8 pixels to prevent overlap and confusion.

These figures depend on device pixel density and viewport scaling, but using CSS pixels during design is the standard approach. The other half of this decision is site audit tool.

If spacing falls below these thresholds, the Google mobile friendly test will fail the page, citing 'clickable elements too close together'.

The 48 by 48 pixels guideline actually corresponds to approximately 9mm on a physical screen, roughly the average size of a fingertip pad. This means that clickable elements smaller than this dimension are prone to errors in tapping accuracy, especially for users with larger fingers or those using their device with one hand.

Spacing between elements also depends on context: if two clickable items are adjacent but differ significantly in size, uneven spacing may still cause issues. For example, a 48×48 pixel button next to a small 24×24 pixel icon without adequate margin can trigger the spacing error even if the larger element is sized correctly. For the detail, see our notes on comparing keyword volumes.

Screen orientation can also impact spacing requirements. When devices switch between portrait and landscape mode, elements might resize or reposition, sometimes reducing spacing below the recommended minimum. Testing your design in both orientations helps ensure consistent spacing and prevents sudden failures in the mobile friendly test.

How to identify which elements trigger the 'clickable elements too close' error

To find the elements causing the error, inspect your mobile layout using browser developer tools in device emulation mode.

Check clickable elements like links, buttons, and input fields placed closely together on the rendered mobile viewport. The other half of this decision is comparing site performance.

A quick way is to use Chrome DevTools to toggle device toolbar and hover over clickable elements to see their bounding boxes.

Look for elements with widths or heights smaller than 48 pixels or that visually overlap or are spaced less than 8 pixels apart.

Google Search Console's Mobile Usability report also lists problematic URLs, and clicking the error provides a screenshot highlighting offending areas.

In some complex sites, clickable elements might be nested within other interactive containers, making detection trickier. For example, a button inside a link or multiple nested clickable spans can cause overlapping interactive areas that Google flags. Carefully reviewing the HTML structure helps identify such nested issues that visual inspection alone might miss.

Another practical method is to temporarily add visible outlines or borders to clickable elements using CSS, for example, outline: 2px solid red;. This visual aid quickly highlights their boundaries and reveals overlaps or insufficient spacing that cause the test to fail.

For sites using JavaScript frameworks or dynamically generated content, inspect the rendered DOM after scripts run rather than the initial HTML. Sometimes spacing issues arise only after client-side rendering alters the layout, so rechecking elements post-render ensures accurate identification of problem areas.

1. Open your page in Chrome and press F12 to open DevTools.
2. Click the 'Toggle device toolbar' icon to emulate a mobile device.
3. Hover over clickable elements to view their bounding rectangles.
4. Measure element width and height using the computed styles panel.
5. Check spacing between adjacent clickable elements visually or with ruler tools.
6. Use screenshots or overlays to mark problematic elements for fixing.

How to measure spacing using browser dev tools or screenshots

DevTools allows direct measurement of element dimensions and spacing between elements using the 'Elements' and 'Computed' panels.

Select an element in the Elements panel and check its 'Box Model' section to see width, height, padding, border, and margin values.

To measure space between elements, note the right margin of one element and left margin of the adjacent one or visually compare their bounding boxes.

Alternatively, use screenshots with pixel rulers or design software to measure pixel distances when DevTools is impractical.

Be mindful of responsive states and zoom levels; always measure in the device viewport size to get accurate CSS pixel spacing.

When measuring spacing, remember that margins may collapse in CSS, especially with vertical margins between block elements. This collapse can cause the actual visual spacing to be less than the sum of specified margins. Confirm spacing visually or by measuring bounding boxes rather than relying solely on margin values.

Using browser extensions or design tools like PixelZoomer or MeasureIt can simplify precise pixel measurement on screenshots. These tools overlay rulers and grids to measure distances between elements visually, which is helpful when DevTools measurements are cumbersome.

In some cases, zooming in on the mobile viewport in DevTools can help verify spacing details that are too small to distinguish at normal zoom. Just be sure that measurements are taken relative to the unzoomed viewport to avoid errors caused by scaling.

1. In DevTools, open the Elements tab and select one clickable target.
2. View the 'Box Model' under the Styles pane for size and margin data.
3. Select the adjacent clickable element and compare margins or bounding boxes.
4. Capture a mobile viewport screenshot and open it in a pixel ruler tool if needed.
5. Confirm each clickable element is at least 48×48 px with 8 px spacing.

Quick CSS and layout fixes to pass the clickable elements spacing test

The fastest fix is to increase padding inside buttons or links to hit the 48×48 pixel minimum size.

If elements remain too close, add horizontal or vertical margin of at least 8 pixels to separate them.

Changing the display property from inline to inline-block or block can help control sizing and spacing.

Avoid removing default margin or padding with CSS resets unless you compensate with explicit spacing.

For complex layouts, consider using flexbox or grid CSS to manage spacing systematically between clickable elements.

• Add padding: increase touch target size
• Add margin: create 8+ pixels spacing
• Use display: inline-block or block for spacing control
• Apply flexbox gap property to space flex items
• Avoid zeroing out margins without replacement

How to stop clickable elements from being too close in the future

Prevent spacing issues by embedding minimum size and spacing rules in your site’s CSS framework or style guide.

Set global styles to enforce minimum button and link sizes, and consistent margins between interactive elements.

Use automated testing tools or CI scripts that check viewport sizes and spacing during development.

Regularly review updates to Google's mobile usability guidelines to adjust your standards accordingly.

Educate your team or yourself on the importance of touch target sizes for accessibility and SEO.

Integrate spacing standards into your design system components to ensure every new button or link automatically meets minimum size and spacing requirements. This proactive approach reduces reliance on manual fixes after development.

Consider adding CSS utility classes for standard spacing increments (e.g., .spacing-8 for 8 pixels margin) that developers can apply consistently, avoiding ad hoc or inconsistent spacing that leads to mobile friendly test failures.

Use automated visual regression tests with tools like Percy or Applitools that can detect layout shifts or spacing anomalies during development, allowing early correction before deployment. These tools complement manual checks and improve ongoing compliance with Google's mobile usability standards.

• Create CSS variables for minimum touch size and spacing
• Use CSS grid or flexbox with gap properties consistently
• Set up automated Lighthouse or Screpy audits for mobile usability
• Regular manual checks on new UI components during design
• Train developers and designers on mobile usability standards

Questions people still ask

I’ve fixed many sites failing Google's mobile usability test by measuring and adjusting clickable element sizes using DevTools and simple CSS tweaks.