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

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 代码以及表单，但我需要使其在所有移动设备上都具有响应性。它适用于某些但不是全部。 Not responsive Responsive

Answer 1

您可以使用此 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
  */
}

Answer 2

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

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

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