WooCommerce Search Box Styled Differently on Mobile

[Alirio]

Inside a GP Block Container, I inserted the WooCommerce Search block. This block shows its boxy shape on desktop but with round corners on tablet and phone. In addition, on tablet, the search icon is sized to a dot that can be barely seen. I can’t figure out what’s causing all this.

On the customizer, the search box shows fine when I choose all the three sizes (desktop, tablet, phone), but on the actual devices, tablet and phone show with round corners.

Would you have any idea of what’s causing this?

I disabled the caching plugin (Swift Performance Lite) and all that’s left is Code Snippets with a GP Color Palette code, GP Blocks, GP Premium, WooCommerce, and WZone, which I tried disabling too with no success.

I also disabled server caching on my Siteground account (static for the site, dynamic for the site, and memcached global).

Any help would be appreciated.

Thank you!

[David]

Hi there,

those are Browser styles – you can try adding this CSS to remove them:

.wc-block-product-search .wc-block-product-search__field {
    -webkit-appearance: none;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alirio]

Wow that fixed it! Thank you very much, David.

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts