PRE-REGISTER NOW FOR OUR LAUNCH IN Q1 2016
.code{
color:black;
font:400 20px arial;
}
body{
}
form { max-width:600px; margin:72px auto;height:180px; }
.form-input {
color:black;
font-family: Helvetica, Arial, sans-serif;
font-weight:500;
font-size: 18px;
border-radius: 15px;
line-height: 30px;
background-color: transparent;
border:2px solid skyblue;
transition: all 0.3s;
padding: 15px;
margin-bottom: 15px;
width:100%;
box-sizing: border-box;
outline:0;
}
.form-input:focus { border:2px solid #e7e7e7; border-radius:32px;width:464px }
textarea {
height: 60px;
resize:vertical;
}
[type=”submit”] {
font-family: arial, sans-serif;
width: 100%;
background:skyblue;
border-radius:5px;
border:0;
cursor:pointer;
color:white;
font-size:24px;
padding-top:10px;
padding-bottom:10px;
transition: all 0.3s;
margin-top: -4px;
font-weight:700;
}
[type=”submit”]:hover { background:silver; border-radius:190px; }
Hello Bilal, In your css you have used ”height:180px;” for the form element. I think you are talking about that one. You want to manage the height of the form from here. But in your css you have mentioned the line-height for the class .form-input, which is effecting on the form input fields height.
Your full HTML Code will be:
Form HTML:
CSS:
.code{ color:black; font:400 20px arial; }
body{ }
form { max-width:600px; margin:72px auto;height:180px; }
.form-input { color:black; font-family: Helvetica, Arial, sans-serif; font-weight:500; font-size: 18px; border-radius: 15px; background-color: transparent; border:2px solid skyblue; transition: all 0.3s; padding: 15px; margin-bottom: 15px; width:100%; box-sizing: border-box; outline:0; }
.form-input:focus { border:2px solid #e7e7e7; border-radius:32px;width:464px }
textarea { height: 60px; width:99%; resize:vertical; }
[type=”submit”] { font-family: arial, sans-serif; width: 100%; background:skyblue; border-radius:5px; border:0; cursor:pointer; color:white; font-size:24px; padding-top:10px; padding-bottom:10px; transition: all 0.3s; margin-top: -4px; font-weight:700; }
[type=”submit”]:hover { background:silver; border-radius:190px; }
again same problem…
i want to adjust the height of the form 180…..
which attribute i use to overcome this problem…
I have checked your css code and according to that you are using the padding and margin for the input fields, which are used to beatify the form. If you want to adjust the height of the form to 180px and want the scroll bar in that height. Then, you have to manage the things according to that. You can use the below css for that.
form {
height: 180px;
margin: 72px auto;
max-width: 600px;
overflow: scroll;
}
sorry for my back to back que…
i means landspace form..
which only contain the half of the screen height wise…
No issues… Yes, I have shared the css for that purpose. You can use the
form {
height: 180px;
margin: 72px auto;
max-width: 600px;
overflow: scroll;
}
For showing the form for half page or you can adjust the height of the form from there.