My issue revolves around the display of input errors, which are causing the top section to become inaccessible. I am looking for a solution that will align the content both vertically and horizontally in the center. The challenge arises when the card contains varying numbers of inputs, as it may or may not need to be centered.
To address this problem, I have experimented with different CSS properties such as removing 'align-items: center;' and trying 'margin: auto;', but so far none have provided a satisfactory solution.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100vh;
overflow: auto;
display: flex;
flex-direction: column;
flex-flow: wrap;
align-items: center;
justify-content: center;
background: url(../img/bg.png) center no-repeat;
}
.card {
z-index: 10;
position: absolute;
height: max-content;
width: 30%;
border-radius: 42px;
display: flex;
flex-direction: column;
background-color: #cecece;
}
.container {
padding-left: 80px;
padding-right: 80px;
}
input {
margin-top: 50px;
margin-bottom: 50px;
}The issue with the accessibility of input 1 is depicted in the image shared here. When the 'card' expands, the top portion becomes unreachable due to the presence of errors at the top and bottom margins.