As a newbie in HTML and CSS, I attempted to design a form with various fields. While the fields work perfectly on larger screens, they do not allow input on smaller screens (mobile devices).
I used the Firefox inspect tool to troubleshoot the issue, but couldn't pinpoint any errors.
<div class="page-wrapper">
<div class="container-fluid">
<div class="row"></div>
<div class="row" style="margin-top: 15px">
<div class="col-lg-12">
<div class="container">
<div class="row" style="margin-top: 15px;">
<div class="col-md-12">
<div class="card" style="border-radius: 10px;">
<h2 class="card-title" style="text-align: center; margin-top: 10px"> registration</h2>
<div class="card-body">
<form action="#" method="POST" id="insertgroup1" class="form-horizontal">
<div class="form-body">
<h3 class="box-title">Group details</h3>
<hr class="m-t-0 m-b-40">
<div class="row">
<div class="col-md-6">
<div class="form-group row">
<label class="control-label text-right col md-3">Group name</label>
<div class="col-md-9">
<input type="text" class="form-control" name='group_name' placeholder="Group name" required>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>