Gostaria de mudar a visualização dos produtos no carrinho, eles ocupam muito espaço no Mobile… seque um print da minha loja e de uma loja que usa a visualização que eu gostaria que fosse.
gostaria que fosse em formato de lista.
1 curtida
Bacana, não tinha pensado nisso. essa outra forma é melhor mesmo.
seria algo ± assim
@media only screen and (max-width:767px) {
.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho img {
max-width: 60px;
max-height: 60px;
}
.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho tr:not(.bg-dark) td {
display:inline-grid
}
.pagina-carrinho:not(.carrinho-checkout) .produto-info ul li:nth-child(1),
.pagina-carrinho:not(.carrinho-checkout) .produto-info ul li:nth-child(2) {
display:none
}
.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho .quantidade a {
font-size:20px;
margin:1px
}
.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho tr {
background: rgba(0,0,0,0.03);
text-align: left;
}
.pagina-carrinho:not(.carrinho-checkout) table.table.tabela-carrinho td.clearfix {
padding: 0 0 0 5px;
}
.pagina-carrinho:not(.carrinho-checkout) table.table.tabela-carrinho td.hidden-phone .preco-venda {
display:none
}
.pagina-carrinho:not(.carrinho-checkout) table.table.tabela-carrinho td.sem-borda {
padding: 0 0 0 5px;
}
.pagina-carrinho:not(.carrinho-checkout) table.table.tabela-carrinho td.sem-borda:not(.conteiner-imagem) {
width:75%
}
.pagina-carrinho:not(.carrinho-checkout) table.table.tabela-carrinho tr[data-produto-id] td:not([class]):last-child {
width:19%
}
.pagina-carrinho:not(.carrinho-checkout) table.table.tabela-carrinho tr[data-produto-id] td .excluir {
text-align:end
}
.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho .quantidade {
width: 90px;
padding-left: 2px;
}
.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho tr.hidden-phone.bg-dark {
display: block !important;
}
.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho tr:not([data-produto-id]).hidden-phone.bg-dark td {
display:inline-table;
border:0
}
.pagina-carrinho:not(.carrinho-checkout) .tabela-carrinho tr.hidden-phone.bg-dark {
text-align:right
}
}
Ah sim entendi.
No caso da para fazer alguns ajustes nesse código pra tipo alinhar o contador de quantidade, justificar o texto do produto a esquerda, centralizar o valor e jogar a lixeira pro canto algo assim?
O site da Forever Liss usa o carrinho dessa forma de lista.
1 curtida
acredito que sim, seja possivel
Ver pra mim por favor e me passa o valor no privado
Isso, esse icone da personalização tirou?
ocultei, pq não acho que no mobile ficaria legal, mas pode ficar visível
Ah sim, ele estava ficando em que lugar?
Ah sim realmente ele fica ruim mesmo.
Pode ser sem ou só se desse para deixar ele no centro e o contandor embaixo da foto mesmo alinhado.
A lixeira e o valor ficaram bons nese canto ai
Isso
Daria? Foto alinhado com o contador e o icone centralizado abaixo?
1 curtida
