The StoreRocket widget is designed to fill its parent container and be responsive across screen sizes. Here's how sizing works and how to adjust it.
How widget sizing works
The widget takes 100% of the width of whatever element you place it in. If your page has a 1200px content area, the widget will be 1200px wide. If that element is a narrow text column, StoreRocket widens the widget to your site's normal width (see below).
The height is set in your Customize, under Layout. By default it is Automatic, which fills the space your page gives it.
How do I make the widget full width?
If your page puts the locator inside a narrow text column, StoreRocket widens it automatically to your site's normal width, the same width as your header. On phones it uses the full width of your page.
If it still looks narrow: Place the embed code in a full-width section of your page, outside any narrow content columns. If your CMS puts everything in a max-width container, you may need to add a full-width section or override the container's max-width with CSS.
How do I adjust the height?
Go to Store Locator > Customize and choose Layout
Under Height on your website, find Desktop height, Tablet height and Phone height
For each one, choose how tall the locator should be
Select Save
Each height has four choices:
Automatic: Fills the space your page gives it
Set a height: You type a height with a unit, like
800pxor80vhFill the screen: As tall as the visitor's screen
Custom height: You type any height with a unit, like
80vh
If you type only a number, like 800, StoreRocket adds px for you.
StoreRocket keeps a minimum height for the chosen style so the map and results stay usable. If your chosen height is too small, a note under the field explains the effective height.
The preview beside the settings always fits its window, so it can't show your height. Check your live page after you save. The desktop and phone buttons in the preview's top bar change the preview width only. They don't change the saved height.
What happens on mobile?
The widget automatically switches to a stacked layout on mobile screens. The map appears above the location list. This breakpoint is controlled by Switch to the phone layout below, under Layout > Arrangement in Customize. It is the width of the locator in pixels.
The default breakpoint works for most websites. If you're seeing layout issues on tablets or large phones, try adjusting this value.
How do locator styles change the layout?
Different styles have different layout options. Choose yours with Locator style under Style > Look in Customize. On Native Modern, Modern and Starbucks you can also set Results panel under Layout > Arrangement to Beside the map or Over the map. The preview beside the settings shows how each one looks.
Questions? Message us on live chat.