Share buttons
Share buttons on mobile: layout, size and native sharing
Quick answer
On phones, share buttons need tap targets of at least 44 by 44 CSS pixels, one row that does not wrap, and ideally a native share button that opens the device's share sheet. Show fewer networks than on desktop, move the row to the end of the post or a bottom bar, and test in portrait and landscape.
On this page
Why mobile needs its own settings
Most readers of most blogs are on phones, and phones share differently: into messaging apps, through the operating system's share sheet, or by copying the link. Desktop share rows designed for a wide column tend to wrap into two rows, shrink icons below a usable size, or push content down. The old responsive add-ons for share plugins, including the MashShare Responsive add-on whose page still has links pointing here, existed to fix exactly this.
The mobile checklist
| Check | Target | Why |
|---|---|---|
| Tap target size | At least 44 x 44 CSS px | Smaller targets cause mis-taps |
| Row length | One line at 360 px wide | Wrapped rows look broken |
| Networks shown | 3 or 4 plus copy link | Space is scarce |
| Native share button | Shown where supported | Covers every messaging app |
| Position | End of post or bottom bar | Top positions push content down |
| Landscape | Tested | Bars can cover half the screen |
Use the native share sheet
Modern mobile browsers support the Web Share API. A single button calls navigator.share() with the page title and address, and the phone offers every app the reader has installed. Show it only when navigator.share exists, and keep a copy link button as the fallback. This one button often replaces three or four network icons on mobile.
if (navigator.share) {
button.addEventListener('click', function () {
navigator.share({ title: document.title, url: location.href });
});
} else {
button.hidden = true;
}Showing different buttons on phones
Many sharing plugins let you choose a separate network list or position for mobile. If yours does not, CSS can hide individual buttons below a breakpoint. Hiding with CSS still loads anything the button needs, so for heavy official widgets it is better to use a plugin setting that does not output them at all.
Portrait, landscape and tablets
The old screenshots in this domain's archive show phones in portrait with three networks and a plus button, and tablets in landscape with the full set. That split still makes sense: tablets in landscape have desktop-like width, while phones in landscape have very little height, so a bottom bar should shrink or hide when the viewport is short.
Questions
What size should mobile share buttons be?
At least 44 by 44 CSS pixels per button, with a few pixels between them.
Should mobile show a WhatsApp button?
Consider a native share button instead; it offers WhatsApp and every other messaging app the reader has. Add a dedicated button only if your audience clearly uses one app.
Why do my share buttons wrap into two rows on phones?
Too many networks or fixed widths. Show fewer networks on mobile or let the row scroll horizontally with a visible hint.
Hannah Voss, Editor. Checks every guide against a working WordPress install and the networks' current documentation. Last reviewed September 2026.
Related guides
- Sticky and floating share bars: when they helpSticky share bars and floating sidebars keep buttons visible while readers scroll. Where to place them, when they hurt, and how to avoid layout shift.3 min read
- Which share networks to show, and how manyHow to choose which social share buttons to display: match networks to your audience, keep the row short, and add copy link, email and messaging options.3 min read
- Styling share buttons with CSSStyle WordPress share buttons with CSS: override colours and text safely, keep focus states, use one icon style, and match your theme in both modes.3 min read