Added btn-responsive style class to define buttons to go full block level while in mobile and to stay defined size in non mobile response

includes/header.php

@@ -39,6 +39,30 @@ header("X-Frame-Options: DENY");
     <link href='plugins/daterangepicker/daterangepicker.css' rel='stylesheet' />
     <link href="plugins/toastr/toastr.min.css" rel="stylesheet">
     <link href="plugins/DataTables/datatables.min.css" rel="stylesheet">
+    <!-- CSS to allow regular button to show as block button in mobile response view using the class btn-responsive -->
+    <style>
+        /* 
+           For screens below 576px (xs): 
+           - Make the button full-width, display:block 
+        */
+        @media (max-width: 575.98px) {
+          .btn-responsive {
+            display: block;
+            width: 100%;
+          }
+        }
+
+        /* 
+           For screens 576px (sm) and above:
+           - Revert to an inline style 
+        */
+        @media (min-width: 576px) {
+          .btn-responsive {
+            display: inline-block;
+            width: auto;
+          }
+        }
+    </style>
 
     <!-- jQuery -->
     <script src="plugins/jquery/jquery.min.js"></script>

user_details.php

@@ -56,7 +56,7 @@ require_once "includes/inc_all_user.php";
                         </div>
                     </div>
                     
-                    <button type="submit" name="edit_your_user_details" class="btn btn-primary"><i class="fas fa-check mr-2"></i>Save</button>
+                    <button type="submit" name="edit_your_user_details" class="btn btn-primary btn-responsive"><i class="fas fa-check mr-2"></i>Save</button>
 
                 </div>
             </div>