page products mais responsivo

gestaoRaul/products/templates/products.html

@@ -27,8 +27,8 @@ Produtos
           <tr>
             <th style="text-align: left;">Produto</th>
             <th style="text-align: left;width: 20%;">Preço</th>
-            <th style="text-align: left;">Quantidade</th>
-            <th style="text-align: left;">Categoria</th>
+            <th class="hide-on-mobile" style="text-align: left;">Quantidade</th>
+            <th class="hide-on-mobile" style="text-align: left;">Categoria</th>
             <th style="text-align: left;width: 20%;">Ações</th>
           </tr>
   
@@ -37,8 +37,8 @@ Produtos
       <tr>
         <td id="name-{{product.id}}" >{{product.name}}</td>
         <td id="price-{{product.id}}" >R$ {{product.price}}</td>
-        <td id="quantity-{{product.id}}" >{{product.quantity}}</td>
-        <td id="category-{{product.id}}" >{{product.category.name}}</td>
+        <td class="hide-on-mobile" id="quantity-{{product.id}}" >{{product.quantity}}</td>
+        <td class="hide-on-mobile" id="category-{{product.id}}" >{{product.category.name}}</td>
         <td>
           <div class="grid-buttons">
           <img 

gestaoRaul/templates/static/home/css/home.css

@@ -33,7 +33,9 @@
 
   @media screen and (max-width: 730px) {
     .grid-container {
+      justify-items: center;
       display: grid;
+      width: 99%;
       grid-template-columns: repeat(1, 1fr);
       gap: 20px;
       /* max-width: 1200px; */
@@ -41,7 +43,7 @@
     }
 
     .card {
-      width: 80%;
+      width: 95%;
       /* height: 80%; */
       background-color: #2b376e;
       border-radius: 15px;

gestaoRaul/templates/static/products/css/products.css

@@ -98,4 +98,13 @@ input, textarea {
 .card:hover {
     transform: scale(1.05);
     box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
+  }
+
+
+  
+
+  @media (max-width: 768px) {
+    .hide-on-mobile {
+      display: none;
+    }
   }