fixing responsive problem

index.html

@@ -491,7 +491,7 @@ <h1 class="text-sm font-semibold">mick</h1>
 
 
     <!-- General Report -->
-    <div class="grid grid-cols-4 gap-6">
+    <div class="grid grid-cols-4 gap-6 xl:grid-cols-1">
 
 
     <!-- card -->
@@ -614,7 +614,7 @@ <h1 class="h5 num-4"></h1>
     <!-- End General Report -->
 
     <!-- strat Analytics -->
-    <div class="mt-6 grid grid-cols-2 gap-6">
+    <div class="mt-6 grid grid-cols-2 gap-6 xl:grid-cols-1">
 
     <!-- update section -->
     <div class="card bg-teal-400 border-teal-400 shadow-md text-white">
@@ -717,7 +717,7 @@ <h1 class="h6">Sales Overview</h1>
     <!-- end header -->
 
     <!-- body -->
-    <div class="card-body grid grid-cols-2 gap-6">
+    <div class="card-body grid grid-cols-2 gap-6 lg:grid-cols-1">
 
         <div class="p-8">
             <h1 class="h2">5,337</h1>
@@ -752,7 +752,7 @@ <h1 class="h2">5,337</h1>
     <!-- end Sales Overview -->
 
     <!-- start numbers -->
-    <div class="grid grid-cols-5 gap-6">
+    <div class="grid grid-cols-5 gap-6 xl:grid-cols-2">
 
     <!-- card -->
     <div class="card mt-6">
@@ -789,7 +789,7 @@ <h1 class="font-semibold"><span class="num-2"></span> Orders</h1>
     <!-- end card -->
 
     <!-- card -->
-    <div class="card mt-6">
+    <div class="card mt-6 xl:mt-1">
         <div class="card-body flex items-center">
 
             <div class="px-3 py-2 rounded bg-yellow-600 text-white mr-3">
@@ -806,7 +806,7 @@ <h1 class="font-semibold"><span class="num-2"></span> posts</h1>
     <!-- end card -->
 
     <!-- card -->
-    <div class="card mt-6">
+    <div class="card mt-6 xl:mt-1">
         <div class="card-body flex items-center">
 
             <div class="px-3 py-2 rounded bg-red-600 text-white mr-3">
@@ -823,7 +823,7 @@ <h1 class="font-semibold"><span class="num-2"></span> comments</h1>
     <!-- end card -->
 
     <!-- card -->
-    <div class="card mt-6">
+    <div class="card mt-6 xl:mt-1 xl:col-span-2">
         <div class="card-body flex items-center">
 
             <div class="px-3 py-2 rounded bg-pink-600 text-white mr-3">
@@ -843,7 +843,7 @@ <h1 class="font-semibold"><span class="num-2"></span> memebrs</h1>
     <!-- end nmbers -->
 
     <!-- start quick Info -->
-    <div class="grid grid-cols-3 gap-6 mt-6">
+    <div class="grid grid-cols-3 gap-6 mt-6 xl:grid-cols-1">
 
 
     <!-- Browser Stats -->
@@ -902,7 +902,7 @@ <h1>safari</h1>
     <!-- end Browser Stats -->
 
     <!-- Start Recent Sales -->
-    <div class="card col-span-2">
+    <div class="card col-span-2 xl:col-span-1">
         <div class="card-header">Recent Sales</div>
 
         <table class="table-auto w-full text-left">