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.
The height is determined by the widget's content and your theme settings. Most themes default to a reasonable height that fits both the map and location list.
Making the widget full width
If your widget looks too narrow, the issue is usually the parent container, not the widget itself.
Fix: 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.
Adjusting the height
The widget height is influenced by your theme layout. In some themes (side-by-side layout), the map panel height adapts to the content. In others (stacked layout), you can influence height through CSS:
#storerocket-widget {
min-height: 600px;
}Add this to your Custom CSS page.
Mobile responsiveness
The widget automatically switches to a stacked layout on mobile screens. The map appears above the location list. This breakpoint is controlled by the Layout Change Breakpoint in your Theme Settings.
The default breakpoint works for most websites. If you're seeing layout issues on tablets or large phones, try adjusting this value.
Widget themes and layout
Different themes have different layout options. Go to Theme Settings to explore the available themes and layouts. Check your widget preview to see how each theme looks.
Questions? Hit us up on live chat.