CODEWITHSUNDEEP
cssformsinput
michaelmcgurk
michaelmcgurk

Reputation: 6523

Responsive input fields in CSS - fluid width?

I'm trying to make the following sign up box fluid responsive in CSS.

Here is an example: http://cssdesk.com/aYLwW

I would like the input field width to be "flexible" and shrink depending on the page.

You can see from the example when I shrink the window, the button eventually drops down below the input field.

With this in mind, what should I set my input#iiihuu-iiihuu field width to be to allow the input field to gracefully resize without any bumpage?

Many thanks for any pointers :-D

Upvotes: 4

Views: 37248

Answers (2)

Ashwin Singh
Ashwin Singh

Reputation: 7375

Give a min-width:550px; to the div containing the text-box and button. Your control will not break then.

Working ex. here http://cssdesk.com/dUjxF

As the definition says min-width sets a min-width to the element, it doesn't go below that size under any circumstances.

Upvotes: 5

renick
renick

Reputation: 3901

You can change the css widths to percent based. See here

Upvotes: 4

Related Questions