Trying to recreate a WordPress page with bootstrap. The original page looks like this: https://i.sstatic.net/FRCkD.jpg
However, my version looks like this:
https://i.sstatic.net/2XLDe.jpg
I want to remove unnecessary white space below the form. Here is my current code:
<div class="container-login100">
<div class="wrap-login100 ">
<span class="login100-form-title p-b-32">
Make Fast Cash Anywhere
</span>
<span class="login100-form-sub-title p-b-32">
Begin Your Fast Start Steps Below...
</span>
<div class="test-progress" style="background-color:#ebebeb;">
<div class="progress-bar progress-bar-success progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:4%; background-color:#00c479;"><span id="progress"> 0% </span></div>
</div>
<form class="login100-form">
<div id="quiz">
<div class="question">
<h3>
<span id="question"> Are you looking for a way to make money online?</span>
</h3>
</div>
<ul class="text-center" style="list-style-position: inside">
<li>
<input type="radio" id="a-option" name="selector" value="1">
<label for="a-option" class="element-animation">Yes</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="b-option" name="selector" value="3">
<label for="b-option" class="element-animation">No</label>
<div class="check"><div class="inside"></div></div>
</li>
<li id="lic" style="display:none">
<input type="radio" id="c-option" name="selector" value="3">
<label for="c-option" class="element-animation">C</label>
<div class="check"><div class="inside"></div></div>
</li>
<li id="lid" style="display:none">
<input type="radio" id="d-option" name="selector" value="3">
<label for="d-option" class="element-animation">D</label>
<div class="check"><div class="inside"></div></div>
</li>
</ul>
</div>
</form>
</div>
</div>
The CSS code I'm using is as follows:
.limiter {
width: 100%;
margin: 0 auto;
background-color: #000000;
}
.container-login100 {
width: 100%;
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: top;
padding: 10px;
background-image: url("../images/dollar-2.jpg");
background-color: #ebebeb;
}
.wrap-login100 {
width: 570px;
background: #fff;
border-radius: 10px;
position: relative;
}
I am using Bootstrap 4 and seeking a responsive height for wrap-login100 rather than full height. If anyone can help achieve this, it would be greatly appreciated. Thank you!
Edit: removing min-height: 100vh; from container-login100 makes it responsive, but the background gets cut off and only visible on half the screen.