Acho que esse código CSS vai servir para você:
/*Regras aplicadas para telas com menos de 479px de largura*/
@media only screen and (max-width: 479px) {
/*Centraliza o botão 'Comprar'*/
.acoes-produto-responsiva {
right: 50%;
transform: translateX(50%);
}
/*Move a bandeira do desconto para o canto superior esquerdo*/
.bandeiras-produto {
left: 0;
right: 50%;
top: 0;
transform: translateX(50%);
}
/*Centraliza o nome e o preço do produto*/
.listagem .listagem-item .imagem-produto, .listagem .listagem-item .info-produto {
text-align: center;
}
}
Oi, um rapaz editou o meu css pra mim mas o botão comprar sumiu, parece estar desativado.
consegue reescrever o código pra ativa-lo pra mim por gentileza?
Segue o código;
/* BOT */
.botao, .botao:hover {
background-image: none;
}
.botao:not(.principal):not(.botao-busca) {
border: 2px solid #ccc;
color: #191919;
}
.listagem-item .acoes-produto .botao, .produto .comprar .botao-comprar, .pagina-carrinho .botao.principal.grande, .carrinho .botao.principal {
transition: background 300ms;
}
.listagem-item .acoes-produto .botao:hover, .produto .comprar .botao-comprar:not(.desativo):hover, {
border-radius: 10px;
}
.listagem .listagem-item:hover {
padding: 15px;
margin: 0 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid rgba(0,0,0,0.075);
background: #fff;
}
Eu não soube me expressar direito, é o botão comprar na página inicial abaixo de cada produto. Não consigo fazer aparecer o botão comprar de jeito algum, apenas ver mais e esse ver mais não tem como configurar ele pra ficar fixo.
como está a sua configuração em visual da loja?
Coloque dessa forma que postei na imagem e teste…
Esse botão só aparece na página do produto mas na listagem dos produtos na página home não apareceu não, já usei 5 códigos que consegui aqui mas serviram apenas pra versão desktop já na mobile não apareceu de jeito nenhum, teve código que desconfigurou minha loja toda passei a noite toda concertando kkkkk
Queria que esse botão ficasse fixo na versão mobile
Depende tb do tema, pq por padrão o botão aparece. Loja teste https://loja.lojadabruna.com.br/
O meu não apareceu de jeito nenhum www.grifestorevariedades.com.br
poderia mostrar como está configurado sua tela de visual, na parte dos botões?
Muito obrigado!
Devo retirar a palavra none e deixar somente important?
Sabe me informar um código pra alterar altura do botão pra baixo do preço do produto e também poder diminuir o botão?
Deve tirar a linha toda ou colocar block
Não funcionou, coloquei block o botão ficou encima do produto e mais largo que o normal, consegui o seguinte código aqui na comunidade que fez o botão comprar ficar abaixo do preço do produto mas não ficou centralizado. Tem como editar esse código pra centralizar o botão?
@media only screen and (max-width: 767px){
#listagemProdutos.listagem .listagem-item .acoes-produto-responsiva,
.listagem.aproveite-tambem .listagem-item .acoes-produto-responsiva {
visibility: visible;
}
#listagemProdutos.listagem .listagem-item .acoes-produto-responsiva .tag-comprar i {
display: none;
}
#listagemProdutos.listagem .listagem-item .acoes-produto-responsiva .tag-comprar span {
font-size: 12px;
}
#listagemProdutos.listagem .listagem-item .acoes-produto-responsiva {
position: unset!important;
}
}
Olha o código que passei era somente para aparecer o botão, como foi solicitado.