update home view card column

app/views/home/index.html.erb

@@ -25,11 +25,11 @@
 </div> -->
 <div class="row">
   <div class="col-md-8 col-lg-8">
-    <div class="card-columns">
+    <div class="card-columns" style="column-gap: 10px;">
 
       <% @employees.each do |employee| %>
 
-        <div data-formid="#form_<%= employee.emp_id %>" class="empBtn card card-inverse card-primary mb-3 text-center" style="width: 15rem;height:15rem;">
+        <div data-formid="#form_<%= employee.emp_id %>" class="empBtn card card-inverse card-primary mb-3 text-center" style="">
             <form id="form_<%=employee.emp_id%>" action="<%= emp_login_path(employee.emp_id) %>" method="PATCH"></form>
             <div class="card-block">
               <h4 class="card-title">
@@ -140,13 +140,45 @@
   .panel-body {
     padding: 5px !important;
   }
-  .card-columns {
+  /*.card-columns {
-          column-count: 5;
+    column-count: 4;
-  }
+    display: inline-block;
+  }*/
   .panel-title .glyphicon {
 
     float: right;
   }
+  @media (min-width: 34em) {
+    .card-columns {
+      -webkit-column-count: 2;
+      -moz-column-count: 2;
+      column-count: 2;
+    }
+  }
+
+  @media (min-width: 48em) {
+    .card-columns {
+      -webkit-column-count: 3;
+      -moz-column-count: 3;
+      column-count: 3;
+    }
+  }
+
+  @media (min-width: 62em) {
+    .card-columns {
+      -webkit-column-count: 4;
+      -moz-column-count: 4;
+      column-count: 4;
+    }
+  }
+
+  @media (min-width: 75em) {
+    .card-columns {
+      -webkit-column-count: 5;
+      -moz-column-count: 5;
+      column-count: 5;
+    }
+  }
 </style>
 <script type="text/javascript">
 $(document).on('turbolinks:load', function() {