On mobile devices, there is a feature that allows a user to use their current location when doing a search by location. Once they click into the location field, a small dropdown will populate and the user will then click on the option to use their location. (If you don't see this on your website when using your mobile device, check here to troubleshoot)
Tip
Place the desired code(s) in the Custom CSS box under Settings > Design. You must clear your caches, then check your web page in an incognito browser to see the change!
Customization Options
-
To change the background color of the "Use My Current Location" option:
.sidx-container .sidx-suggestions-use-geo .sidx-geo-search-button.sidx-geo-search-button {
background: #hexcode !important;
} - To change the font color of the "Use My Current Location" option:
.sidx-container .sidx-suggestions-use-geo .sidx-geo-search-button.sidx-geo-search-button {
color: #hexcode !important;
}
Multiple Changes
*If you were to use all of the above properties to update your button, your code may look like this when placed into your design settings:
.sidx-container .sidx-suggestions-use-geo .sidx-geo-search-button.sidx-geo-search-button {
background: #00000 !important;
color: #ffffff !important;
}
Warning: Showcase IDX may make future updates to the product which may break previously acceptable CSS code, causing that section on your website to look unusual. If you've noticed your site not looking as expected, please return to this article for the updated CSS code.
If you are inexperienced with CSS, we suggest you turn to your developer as they will be the best contact person for CSS related questions and concerns. We are not developers and provide this baseline CSS for agents and developers experienced in coding.