Making a fully responsive SEARCH BAR

Design help General
1

Hello everyone,
I’m trying to build a search bar and I’d like to have it fully responsive.
I’m not sure I’m doing it the right way though:

Here how I did it so far using the form wrapper:

1366×644 78.3 KB

problem #1

the first problem is that I seem to need to add a character in order to get the button to work, what am i missing?

problem #2

the result is OK when I use the target device simulation on webflow (next 4 pics) BUT it breaks in intermediate browser resolutions.

What would be the right way to have it fully responsive? Search is the primary source of interaction on the site and it’s fundamental that I get it right.

Thank you in advance for your help!

some examples to follow.

This is OK

1366×705 80.8 KB
1366×705 59.1 KB

This is OK

1366×705 37.7 KB

This is NOT OK

1366×644 92.6 KB

2

Post a webflow link so that I can go in and see whats up!

3

Sure! there you go: http://purevisionio.webflow.com/

Thank you in advance!

4

Actually can you make a public link for your workflow.

5

Without looking at the workflow my best guess would be to put both elements in separate divs and set the width to 80% (search field) and 20%(button). And put them both in another div and set that div to 100% width. Try that.

2 Likes
6

Hi Hamzster!
Thank you for the reply, I tried it in a new site and it works flawlessly!

7

Awesome glad it worked out for you!

8

Please test on actual device. It is often a different ball game from WF desktop interpretation.