Adjust size of Store Locator widget

Ask the Community Customization
1

In the meantime, could you please send me a link to the page where your widget is installed?

I’ll be happy to find the custom solution for you :slightly_smiling_face:

2

It’s currently published on this page due to size: https://www.alleghenycounty.us/Parks-and-Events/Parks/Locator

However, the original intention was to add the widget to Copy - Bad Elfsight Widget - Allegheny County, PA as an additional tool. As you’ll see, the dimensions are very disproportionate to the page size. Ideally it should be about ~700px W x ~400px L, and have a collapsible side panel that doesn’t obscure 2/3 of the map.

1 Like
4

Thank you!

The size of the container where the widget is placed makes it look this way. To adjust dimensions on both pages, please add this code to the Custom CSS field on the Style tab of your widget’s settings:

/* Adjust height and width of the widget on the Locator page */
.global-styles,
.page-name-locator #main {
  max-width: 80vw !important;
  max-height: 70vw !important;
}

/* Adjust sidebar width on the Locator page */

.global-styles,
.page-name-locator [class*="desktop-layout__Sidebar-sc"] {
  max-width: 300px !important;
}

/* Adjust height of the widget on the Draft page */

.global-styles,
.page-name-draft [class*="widget__Container-sc"] {
  max-height: 500px !important;
}

/* Adjust sidebar width on the Draft page */

.global-styles,
.page-name-draft [class*="tablet-layout__Sidebar-sc"] {
  max-width: 300px !important;
}

/* Adjust display of search and zoom icons */

[class*="directory-search__Container-sc"] button,
.maplibregl-ctrl-zoom-in,
.maplibregl-ctrl-zoom-out {
  padding: 0px !important;
  margin: 0px !important;
}

Check it out and let me know if it works for you or you’d still like to have a collapse/expand option for the sidebar :slightly_smiling_face: