Whenever I adjust the size of the browser window, the elements inside the modal box become misaligned.
HTML
<div class='modal'>
<div class='modal-content'>
</div>
</div>
Below is the CSS for the modal box:
.modal {
display: none; /* Initially Hidden */
position: absolute; /* Fixed Positioning */
z-index: 1; /* On Top of Other Elements */
left: 0;
top: 0;
width: 100%; /* Full Width */
max-width: 100%;
height: 100%; /* Full Height */
overflow: auto; /* Scroll if Necessary */
background-color: rgb(0,0,0); /* Fallback Color */
background-color: rgba(0,0,0,0.4); /* Black with Opacity */
padding-top: 60px;
}
.modal-content {
background-color: #ffffff;
margin: 5% auto 15% auto; /* Centered Vertically */
border: 1px solid #888;
width: 22%; /* Responsive Width */
height: 55%;
}