mirror of
https://github.com/welton89/RRBEC.git
synced 2026-04-05 13:35:42 +00:00
page products mais responsivo
This commit is contained in:
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -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
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user