[Resolved] WooCommerce Search Box Styled Differently on Mobile

Home Forums Support WooCommerce Search Box Styled Differently on Mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1488413
    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!

    #1488492
    David
    Staff
    Customer Support

    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;
    }
    #1488557
    Alirio

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

    #1488796
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.