Enter Location Text Cut Off

  • Updated

You may experience a theme conflict that can cause the text inside the location field of the search bar is cut off or completely invisible, it can make clicking into the field difficult and hinders the search experience. Here's an example of what this might look like:

Screen_Shot_2020-10-22_at_4.41.18_PM.png

CSS - Adjusting Margin

Your theme may have some code that is setting margin for another item on your website and is conflicting with the search bar, but you can override this.

Copy and paste the following code under Settings > Design in the custom CSS box:

.sidx-container .sidx-searchform .sidx-suggestions-input input {
margin: 0 !important;
}

You may need to clear your website cache (usually in the form of a plugin) and browser cache to be sure that it updates when you check it. You can always check the website in a browser you never use or in an incognito window.

This should fix the issue 99% of the time.

CSS - Adjusting Font Color

Your theme may have some CSS or code that is making the text in the field white. This is less common but does happen. You can override this with CSS but you will want to exercise caution as it could affect other areas of your website. 

Copy and paste the following code under Settings > Design in the custom CSS box:

input::placeholder, textarea::placeholder {
color: #hexcode !important;
}

Change the word "hexcode" to your desired color, something that will be visible to users. The default color for this text is a light grey (#cacaca).