I'm encountering some CSS styling issues. The button in my form remains perfectly positioned when I resize the window, but the inputs are moving around. Why is this happening?
Also, when a button is pushed, a h2 element with a little arrow needs to be consistently aligned in the middle. Can I achieve this and keep the text centered both horizontally and vertically within the pop-up? If so, how can I do it?
Below is the CSS code for the form:
#lname, #fname {
width: 90%;
height: 50px;
margin-top: 6%;
border-radius: 5px;
background-color: #1e2228;
color: #ddd;
border: 0px;
font-size: 2em;
position: absolute;
text-align: center;
}
#fname {
left: 40px;
top: 18px;
}
#lname {
left: 40px;
top: 84px;
}
#btn {
width: 100%;
height: 50px;
margin-top: 72px;
border-radius: 0 0 5px 5px;
background-color: #1e2228;
color: #ddd;
border: 0px;
font-size: 2em;
position: absolute;
left: 0px;
top: 128px;
}
And here is the CSS code for the pop-up window:
h2 {
margin: auto;
margin-top: 100px;
position: relative;
width: 50%;
height: 205px;
padding: 0px;
background: #2F3742;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
font-size: 2em;
color: #8092AA;
margin: 100px auto 0 auto;
padding-top: 6%;
}
h2:after {
content: '';
position: absolute;
border-style: solid;
border-width: 0 20px 20px;
border-color: #2F3742 transparent;
display: block;
width: 0;
z-index: 1;
top: -20px;
left: 355px;
}
If you want to see this issue in action, feel free to check out the demo at http://codepen.io/shiva112/pen/dGMrWB