How do I automatically resize input fields in a form?

Question

I'm trying to make my registration form responsive for mobile devices but I got a little problem with the resizing of my input fields,

I made a jsfiddle to show the situation: https://jsfiddle.net/ntvrhLpe/

I would like that if the width is smaller than 540px the input fields automatically resize to full width with a margin of 10px at both sides.

I already tried some things but nothing works:

input[type=text], input[type=password], input[type=email]{
margin-left:10px;
margin-right:10px;
width:100%;
}

Can someone help me?

marc_s · Accepted Answer · 2016-06-19 18:32:00Z

2

Your initial CSS for inputs

input[type=text], input[type=password], input[type=email] {
    font-size: 20px;
    margin-bottom:10px;
    padding: 8px 6px;
    height: 38px;
    width:250px;
    box-sizing: border-box;
}

Then in your media query:

input[type=text], input[type=password], input[type=email] {
    margin-left: 0px;
    margin-right: 0px;
    width: 100%;
}

fieldset {
    padding: 10px;
}

You will get it

You should get satisfaction

edited Jun 19, 2016 at 18:32

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Aug 29, 2015 at 14:06

romuleald

1,45416 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thempower Over a year ago

Only problem is that the height of the input field is now changed?

romuleald Over a year ago

The box-sizing: border-box; allows you to set a width even if a padding is set without disturbing the Math of width

Alireza Fattahi · Accepted Answer · 2015-08-29 14:02:41Z

0

You have not set the width is your css ( it was not in the fiddle although you have mention it in you question ! )

Please see https://jsfiddle.net/rwbLmex2/

@media (max-width: 540px) {
label {
    text-align:left;
    width:180px;
    float:left;
    margin-top:10px;
    margin-left:20px;
} 
input[type=text], input[type=password], input[type=email]{
    margin-left:10px;
    margin-right:10px;
    width : 100%
}
}

By the way I recommend to use a CSS framework like bootstrap which handle all them for you !

answered Aug 29, 2015 at 14:02

Alireza Fattahi

46.1k18 gold badges134 silver badges187 bronze badges

Collectives™ on Stack Overflow

How do I automatically resize input fields in a form?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related