Search bar not responsive

Hello! I am updating my websites and doing some changes on the theme. I have customized my mobile header with header builder. I have hamburger menu in the left, search form in the middle and cart on the right of the main header (mobile). The problem that I’m having is the searchbar is non responsive. For example, the searchbar takes too much space on iphone screen that it throws half of the cart icon away from the screen. However it’s okay in a Samsung J7 Pro. It also messes up in phones like Asus Zenfone Max pro m1. Please tell me how to make it responsive.

Attachments:

You must be logged in to view attached files.

Hello,

Please provide the site URL your site admin access so that we could check the settings in the Header builder.

Best Regards

Thank you for your response.

Hello,

The search width is determined by your custom CSS https://gyazo.com/1f5be33b856fbf27cfb96008d6664ec0

Remove this custom or reduce the min-width.

Best Regards

I did that, but the size of the search form is reduced naturally. I want to make the search bar a little wide.like this (screenshot)

Attachments:

You must be logged in to view attached files.

Hello,

Try to set the min-width in percentage, not in pixels.

Best Regards

If I set it on % it wouldn’t solve it. The search bar would expand to the right side only.

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Mobile:

body .whb-general-header .whb-mobile-center {
    flex: 1 0 auto;
}
body .whb-general-header .whb-mobile-left, 
body .whb-general-header .whb-mobile-right {
    flex: 0 1 auto;
}

Best Regards

Listen! You are the best! Thank you. It worked like a charm. Much love to you and the team!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts