padding for mobile

src/views/dashboard.ejs

@@ -11,8 +11,8 @@
                     class="text-center cursor-pointer min-w-[150px] bg-green-600 px-4 py-2 text-white rounded hover:bg-green-800"
                     type="button">Create new plan </a>
             </div>
-    <div class="flex justify-center">
+            <div class="flex justify-center sm:px-6 w-full ">
-        <div class="mb-12 grid gap-y-4 gap-x-6 md:grid-cols-2 mr-3 ml-3 ">
+                <div class="mb-12  grid gap-y-4 gap-x-6 md:grid-cols-2  ">
                     <% plans.forEach(plan=> { %>
                         <%- include('./partials/dashboardBox.ejs', {plan: plan}) %>
                             <% }); %>

src/views/partials/dashboardBox.ejs

@@ -1,6 +1,6 @@
 <div class="mt-12">
     <a href="/plans/<%=plan._id%>">
-        <div class=" relative flex flex-col bg-clip-border  rounded-xl bg-white text-gray-700 shadow-md w-full min-h-[150px] min-w-[380px] 
+        <div class=" relative flex flex-col bg-clip-border  rounded-xl bg-white text-gray-700 shadow-md w-full min-h-[130px] min-w-[340px] 
         md:min-h-[220px] md:min-w-[500px]">
             <!-- <div -->
             <!--   class="bg-clip-border mx-4 rounded-xl overflow-hidden bg-gradient-to-tr from-blue-600 to-blue-400 text-white shadow-blue-500/40 shadow-lg absolute mt-2 grid h-16 w-16 place-items-center"> -->