I've encountered an issue while trying to slice an image using HTML/CSS. My form, which I want to display in 3 columns, instead appears in a single column.
The only time it works as intended is when I place my form and another div in the command section. However, I prefer to keep them separate if possible.
I'm currently working with Bootstrap 4.
HTML:
<header id="home">
<div class="container">
<div class="row besspar-form-div">
<div class="form-div">
<form action="" method="post">
<div class="form-group col-md-4 width-36p">
<p>
<img src="img/phone-round.png" alt="" class="img-phone">
<img src="img/phone-round-or.png" alt="" class="img-phone-or">
Om welk toestel gaat het?
</p>
<select name="brand" class="form-control round-control" required>
<option value="">SELECT JE MERK</option>
<option value="Apple">Apple</option>
<option value="Samsung">Samsung</option>
<option value="Huawei">Huawei</option>
<option value="opt-seprator" disabled>───────────────</option>
<option value="Motorola">Motorola</option>
<option value="Sony">Sony</option>
<option value="LG">LG</option>
<option value="OnePlus">OnePlus</option>
<option value="HTC">HTC</option>
</select>
</div>
<div class="form-group col-md-4 width-36p">
<p>
<img src="img/mailbox.png" alt="" class="img-mail">
<img src="img/mailbox-or.png" alt="" class="img-mail-or"> Wat is je postcode?
</p>
<input type="text" name="pincode" class="form-control round-control" placeholder="1234 AB" required>
</div>
<div class="form-group col-md-4 width-28p">
<button type="submit" class="btn btn-prijzen">
Prijzen vergelijken
</button>
<p class="fs-16b">
<span class="small-circle"></span>100% Gratis en vrijblijvend
</p>
</div>
</form>
</div>
</div>
</div>
</header>
CSS:
.round-control {
border-radius: 25px;
border: 1px solid #ccc;
height: 400px;
color: inherit
}
div.besspar-form-div {
padding: 40px 0px;
background-color: #FFFFFF;
margin: 30px auto;
border-radius: 15px;
}
div.form-div {
width: 90%;
margin: auto;
}
.img-phone, .img-mail {
display: inline-block;
}
.img-phone-or, .img-mail-or {
display: none;
}
select {
-webkit-appearance: menulist-button;
background: url("../img/down-arr.png") 96% / 15% no-repeat #eee;
background-size: 16px;
}
p.fs-16b {
font-size: 16px;
font-family: Montserrat-bold;
color: #ffad18;
padding-bottom: 0px;
padding-top: 10px;
}
.small-circle {
content: "\25CF";
font-size: 20px;
color: #3EB7D3;
}
I anticipated that the columns would divide the form content into 3 separate columns. However, all the content is currently appearing in a single column.