Utilizing bootstrap columns, I have a form that is set to display: absolute. However, when the screen size is reduced, the form does not appear completely as seen in this image.
How can I ensure that the form appears entirely as shown in the desired result?
The following is the HTML and CSS code for the form class:
.form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display:block;
margin-bottom:80px;
width:540px;
height:650px;
background:#fff;
border-radius:5px;
overflow:hidden;
z-index:1;
}<div class="container-fluid h-100">
<div class="row no-gutters h-100">
<div class="col-12 col-md-6 left">
<div class="wrapper">
...
</div>
</div>
<div class="col-12 col-md-6 px-0">
<div class="imageWrapper">
<img class="homePhoto" src="images/photo-home">
<img class="formShape" src="images/forme_blue_half.png">
<div class="form" id="form">
<h2>LET'S TALK</h2>
<form action="" method="post">
<input class="input field" type="text" id="name" name="user_name" placeholder="LAST NAME*" required>
<br/>
<input class="input field" type="text" id="firstName" name="user_firstName" placeholder="FIRST NAME*" required>
<br/>
<input class="input field" type="email" id="email" name="user_mail" placeholder="E-MAIL*" required>
<br/>
<input class="input field" type="text" id="organization" name="user_organizationName" placeholder="ORGANIZATION NAME">
<br/>
<textarea class="field fieldTextArea" id="msg" name="user_message" placeholder="PLEASE TELL US ABOUT YOUR NEEDS*" required></textarea>
<br/>
<div class="checkboxContainer">
<input type="checkbox" id="receiveEmails" name="receiveEmails" checked disabled>
<label class="checkbox" for="receiveEmails">I would like to receive information e-mails</label>
</div>
<br/>
<input class="button submitButton" type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</div>