Hi!
Thank you for your kind words!
The issue is the incorrect letter spacing setting on the container element. The search adopts the width of it’s container, which changes it’s width because of the letter spacing. Initially the container letter spacing is “1em”, which changes to “0.2em” by a script (from the theme I suppose?).
I’m not sure if this is intended, you might need to ask the theme author about it.
Anyways, to fix the problem, just use the following custom CSS rule:
.headline__primary {
letter-spacing: 0.2em !important;
}This will force an initial “0.2em” letter spacing, thus the width will be correct on page load. Additionally, I have noticed that the placeholder line height is also overwritten by a 3rd party style, causing it to shift upwards a few pixels. Use this rule to fix that as well:
div.ajaxsearchpro[id*="ajaxsearchpro1_"] .probox .proinput input.orig::-moz-placeholder {
line-height: 34px !important;
}Make sure to clear your site cache (if you use any) after adding these custom CSS rules to see the effect.
Best,Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
