Image Choices Hard to Click on Mobile?

On mobile, you have to tap precisely on the label or the actual radio button circle to select.

On desktop it’s fine - you can click on the image or anywhere within the outline, and it selects the option.

Even when testing a mobile version on desktop, it works perfectly. But on an actual phone, you have to tap the words (label) or the actual radio button circle, which is causing suboptimal UX.

A big part of the reason I pursued image choices is to improve mobile UX, since radio buttons require more precision to tap.

Unfortunately the buttons now require the same precision on mobile, except users tend to think they can tap any part of the button area, when they cannot.

Any help is appreciated!

Put a few hours in on this and basically found that if you expand the size of the label element, it extends the clickable area.

Seems that label is the only clickable part of it on mobile - presumably because of how the mobile browsers handle different types of elements.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.