page products mais responsivo

This commit is contained in:
2025-01-09 15:48:56 -03:00
parent d874b94c16
commit 1011624f03
7 changed files with 16 additions and 5 deletions

Binary file not shown.

View File

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

View File

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

View File

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