Skip to main content

The store locator is not showing properly on mobile

Common fixes for mobile display issues with your store locator widget.

Updated this week

If your store locator looks broken, cut off, or doesn't scroll properly on mobile, it's usually a viewport or CSS issue with your website.

Add the viewport meta tag

Make sure your website has this line inside the <head> tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Without this tag, mobile browsers may not scale the page correctly, causing the store locator to render at desktop width.

Common mobile issues

Store locator is cut off or too narrow

Your page layout might be constraining the widget width. The store locator takes 100% of its container's width. If the container is narrow (e.g. inside a sidebar), the widget will be narrow too.

Fix: Make sure the embed code is inside a full-width container, or use a full-width page template.

Can't scroll the location list

If the location list doesn't scroll on mobile, there might be a CSS conflict with your website. Try adding this to Widget > Custom CSS:

.storerocket-result-list { -webkit-overflow-scrolling: touch; }

Widget overlaps the navigation menu

This is usually a z-index issue. Add this to Widget > Custom CSS:

.storerocket-container { z-index: 1 !important; }

Map loads but the list doesn't show (or vice versa)

On mobile, the store locator switches to a stacked layout (map on top, list below). If one part is hidden, your page CSS might be interfering. Check for overflow: hidden on parent elements.

Testing mobile display

Use your browser's mobile preview mode: right-click the page, select Inspect, then click the mobile device icon (or press Ctrl+Shift+M). This lets you test different screen sizes without a phone.

Still having issues? Share your website URL on live chat and we'll take a look.

Did this answer your question?