# Store Locator **URL:** https://community.elfsight.com/c/css-codes/store-locator/208.md [Latest](https://community.elfsight.com/latest.md) · [Categories](https://community.elfsight.com/categories.md) · [Tags](https://community.elfsight.com/tags.md) --- ## [Change text color in location badge and icon color in the marker](https://community.elfsight.com/t/change-text-color-in-location-badge-and-icon-color-in-the-marker/81966)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [September 17, 2026, 10:30am UTC](https://community.elfsight.com/t/change-text-color-in-location-badge-and-icon-color-in-the-marker/81966 "2026-09-17T10:30:27Z")
Add this code to the Custom CSS field on the Style tab of your Store Locator widget’s settings: global-styles, \[class\*='badge\_\_StyledBadge-sc'\] { color: rgb(255, 255, 255); } global-styles, \[class\*='Icon\_\_IconContainer-… --- ## [Show Map and List Stacked on Mobile](https://community.elfsight.com/t/show-map-and-list-stacked-on-mobile/140572)
**Author:** [@user2694](https://community.elfsight.com/u/user2694)\ **Replies:** 3\ **Last updated:** [July 23, 2026, 10:27am UTC](https://community.elfsight.com/t/show-map-and-list-stacked-on-mobile/140572 "2026-07-23T10:27:33Z")
Hi, I didn’t see an option for stacked view on mobile. This is my suggesting with custom CSS. Add this code to the Custom CSS field on the Style tab of your widget’s settings: /\* --- Mobile Layout: Show Map AND List (… --- ## [Hide sidebar on desktop and location list on mobile](https://community.elfsight.com/t/hide-sidebar-on-desktop-and-location-list-on-mobile/81963)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [February 20, 2025, 6:15pm UTC](https://community.elfsight.com/t/hide-sidebar-on-desktop-and-location-list-on-mobile/81963 "2025-02-20T18:15:12Z")
Add this code to the Custom CSS field on the Style tab of your Store Locator widget’s settings: .global-styles, \[class\*="layout\_\_Sidebar-sc"\] { display: none !important; } @media (width \<= 480px) { \[class\*="directory-l… --- ## [Set custom font for all elements (Store Locator)](https://community.elfsight.com/t/set-custom-font-for-all-elements-store-locator/91334)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [January 26, 2026, 11:00am UTC](https://community.elfsight.com/t/set-custom-font-for-all-elements-store-locator/91334 "2026-01-26T11:00:36Z")
Although we do provide a list of fonts for you to choose for your widget, you might happen to need a custom code. If that is the case, add the code below to the Custom CSS field on the Style tab of your Store Locator wi… --- ## [Change logo size in location popup](https://community.elfsight.com/t/change-logo-size-in-location-popup/91335)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [August 8, 2025, 9:21am UTC](https://community.elfsight.com/t/change-logo-size-in-location-popup/91335 "2025-08-08T09:21:54Z")
Add this code to the Custom CSS field on the Style tab of your Store Locator widget’s settings: .global-styles, \[class\*="business-logo-image\_\_DefaultLogo-sc"\] { width: 60px !important; } --- ## [Change the Markers’ size in Map](https://community.elfsight.com/t/change-the-markers-size-in-map/112403)
**Author:** [@Sina](https://community.elfsight.com/u/Sina)\ **Replies:** 0\ **Last updated:** [April 8, 2025, 9:05pm UTC](https://community.elfsight.com/t/change-the-markers-size-in-map/112403 "2025-04-08T21:05:59Z")
Add this code to the Custom CSS field on the Style tab of your Store Locator widget’s settings: \[class\*="marker\_\_Container-sc"\] { transform-origin: center bottom; transform: scale(3); } \[class\*="marker\_\_Container-s… --- ## [Reduce height of location card popup](https://community.elfsight.com/t/reduce-height-of-location-card-popup/61026)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [December 2, 2024, 12:55pm UTC](https://community.elfsight.com/t/reduce-height-of-location-card-popup/61026 "2024-12-02T12:55:37Z")
Add this code to the Custom CSS field on the Style tab of your Store Locator widget’s settings: .global-styles, \[class\*='location-card-popup'\] { max-height: 500px; } --- ## [Change width of the sidebar](https://community.elfsight.com/t/change-width-of-the-sidebar/91336)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [December 25, 2024, 12:48pm UTC](https://community.elfsight.com/t/change-width-of-the-sidebar/91336 "2024-12-25T12:48:11Z")
Add this code to the Custom CSS field on the Style tab of your Store Locator widget’s settings: \[class\*="desktop-layout\_\_Sidebar-sc"\], \[class\*="tablet-layout\_\_Sidebar-sc"\] { flex-basis: 300px; max-width: 300px; } --- ## [Hide location list](https://community.elfsight.com/t/hide-location-list/61022)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 2\ **Last updated:** [December 2, 2024, 1:11pm UTC](https://community.elfsight.com/t/hide-location-list/61022 "2024-12-02T13:11:41Z")
Add this code to the Custom CSS field on the Style tab of your Store Locator widget’s settings: .global-styles, \[class\*="desktop-layout\_\_Sidebar-sc-"\], \[class\*="mobile-layout\_\_Directory-sc-"\] { display: none !important;… --- ## [Hide Load More button](https://community.elfsight.com/t/hide-load-more-button/81964)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [November 12, 2024, 6:36pm UTC](https://community.elfsight.com/t/hide-load-more-button/81964 "2024-11-12T18:36:13Z")
Add this code to the Custom CSS field on the Style tab of your Store Locator widget’s settings: \[class\*="directory-locations-list\_\_StyledButton-sc"\]{ display: none; } --- ## [Prevent image cropping in popup](https://community.elfsight.com/t/prevent-image-cropping-in-popup/61025)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [July 11, 2024, 6:27pm UTC](https://community.elfsight.com/t/prevent-image-cropping-in-popup/61025 "2024-07-11T18:27:44Z")
Add this code to the Custom CSS field on the Style tab of your Store Locator widget’s settings: global-styles, \[class\*="Popup\_\_PopupContent-sc"\] \[class\*="MediaImage\_\_Container-sc"\] img { object-fit: contain !important; … --- ## [Change image border radius](https://community.elfsight.com/t/change-image-border-radius/61023)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [July 11, 2024, 6:26pm UTC](https://community.elfsight.com/t/change-image-border-radius/61023 "2024-07-11T18:26:11Z")
Add this code to the Custom CSS field on the Style tab of your Store Locator widget’s settings: .global-styles, \[class\*="MediaContainer\_\_Container-sc"\] { border-radius: 0px !important; } --- ## [Change color of the scrollbar in the location list](https://community.elfsight.com/t/change-color-of-the-scrollbar-in-the-location-list/47924)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [April 17, 2024, 11:15am UTC](https://community.elfsight.com/t/change-color-of-the-scrollbar-in-the-location-list/47924 "2024-04-17T11:15:38Z")
Add this code to the Custom CSS field on the Style tab of your Store Locator widget’s settings: .global-styles, \[class\*="directory-locations-list\_\_Container-sc"\]::-webkit-scrollbar-thumb { background-color: green !imp… --- ## [Change color of the title, website and phone number](https://community.elfsight.com/t/change-color-of-the-title-website-and-phone-number/44185)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [March 15, 2024, 12:17pm UTC](https://community.elfsight.com/t/change-color-of-the-title-website-and-phone-number/44185 "2024-03-15T12:17:41Z")
Add this code to the Custom CSS field on the Style tab of your Store Locator widget’s settings: @external { :widget { --title-color: red; --tel-color: green; --website-color: blue; } } .global-styles, \[class\*="directo… --- ## [Move badge under the Business Name](https://community.elfsight.com/t/move-badge-under-the-business-name/44975)
**Author:** [@Max](https://community.elfsight.com/u/Max)\ **Replies:** 0\ **Last updated:** [March 22, 2024, 1:21pm UTC](https://community.elfsight.com/t/move-badge-under-the-business-name/44975 "2024-03-22T13:21:53Z")
Add this code to the Custom CSS field on the Style tab of your Store Locator widget’s settings: .global-styles, \[class\*='location-preview-image-layout\_\_Content-sc'\] \[class\*='typography\_\_Container-sc'\] { display: flex;…