如何使表单具有响应性，因为它在某些设备上看起来不错，但在其他设备上没有响应

Question

<div class="modal" id="myModal" style="width:50%; top:15%;" role="dialog" >
<div class="">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-bodys" style="padding:20px 8px 20px 20px">
<a style="background: #EAEAEA;" class="wt-closebtn close closeButtonJoinNOw" aria-label="Close"><i class="fa fa-times" data-dismiss="modal"></i></a>
<form id="wt-single-joinnow-form" class="row">
<h2 class="col-sm-12"> Join Us Now </h2>
<div class="form-group col-sm-6" >
<label for="usrname"> First Name</label>
<input type="text" class="form-control" name="first_name" id="first_name" placeholder="Enter your first name">
</div>
<div class="form-group col-sm-6">
<label for="usrname"> Last Name</label>
<input type="text" class="form-control" name="last_name" id="last_name" placeholder="Enter your last name">
</div>
<div class="form-group col-sm-12" >
<label for="usrname"> Email Address</label>
<input type="text" class="form-control" name="email" id="email" placeholder="Enter your email">
</div>

<div class="form-group col-sm-12">
<label for="psw"> Password</label>
<input type="password" class="form-control" minlength="8" maxlength="16"  id="password" name="password" placeholder="Enter your password">
<span id="password_strength"></span>
</div>
<div class="form-group col-sm-12">
<label for="psw"> Re-type Password</label>
<input type="password" class="form-control" minlength="8" maxlength="16"  id="pass2" placeholder="Re-type your password" onkeyup="checkPass(); return false;">
<span id="confirmMessage" class="confirmMessage"></span>
</div>

<div class="formRadio123" id="customrediobtnmsgid">
<label>I want to start as:</label>&nbsp;
</div>
<div class="formRadio" id="customrediobtnid">
<input checked="checked" type="radio" class="" id="userTyp" name="user_type" value="freelancer">
<label for="Freelancer">Freelancer</label>&nbsp; 
<input   type="radio"  id="userType" name="user_type" value="Client">
<label for="Client">Client</label>&nbsp; 
<!--  <input style="visiblity:hidden !important; display: none;" type="radio" class="intersmodalclassclick" id="userType" name="user_type" value="Intern">
<label for="Intern">Intern</label> -->
</div> 
<div class="problemSignUpError" id="problemSignUpError"></div>
<button class="btn btn-success btn-block" id="myBtn1" aria-hidden="true"> Join Now</button>

</form>
</div>
</div>
</div>
</div> 
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
</script>

我想让这个表单有响应性——它对一些网站有响应，但对其他网站没有响应，所以需要让它有响应性。如果有人能指导我在这个代码中更改什么以使其响应。我可以共享它的css代码以及表单，但我需要使它在所有移动设备上响应。它在某些方面效果很好，但在所有方面都不好。没有响应响应

Answer 1

您可以对不同的设备使用@media规则和不同的css

@media (min-width: 576px) {
//your css
}

您可以根据您的设备更改最小和最大宽度

Answer 2

您可以使用此css属性来指定表单的宽度。一旦设备的宽度从570(这是大多数手机(下降，就会更改

@media only screen and (max-width: 570px) {
/*
write the width and height of your form by using form property or class containing 
the form
*/
}