Botão ver mais no mobile e no site

Boa tarde a todos…
Tudo bem com vocês?
Alguem poderia nos ajudar?
@DMedina
Tem como deixar este botão de ver mais, no site um pouco abaixo das fotos e no mobile menor e mais centralizado?
Nova Imagem de Bitmap
Captura de tela 2021-11-02 173758
Qualquer ajuda, ja agradeço demais, lembrando que nosso plano é gratuito.
Abraços

Olá boa tarde, você se refere para que fique desta forma?

Caso seja estarei deixando o código para que fique desta forma, coloque-o na sessão de CSS:

.listagem-item:hover .acoes-produto {
bottom: 20% !important;
}

.listagem-item .acoes-produto {
background-color: rgba(255,255,255,0.0) !important;
border-color: transparent !important;
}

a.tag-comprar.fundo-principal {
margin-top: 70px;
margin-right: 85px;
}

Desktop:

image

Mobile:

1 curtida

Estamos muito agradecidos pelo retorno @plugoo .
Vamos testar aqui e enviamos o feedback.
Aproveitando o post, se precisarmos diminuir um pouco este botão será nos mesmo códigos aqui postado?

Sim, para diminuir o tamanho do botão as alterações são realizadas na parte de " a.botao.botao-comprar.principal "

@plugoo olha eu aqui de novo
diminui os numeros conforme print
Captura de tela 2021-11-03 164341
e ficou do mesmo tamanho e no mobile esta ficando a direita, oque fazer, errei em alguma coisa ou alterei algo que nao devia?

Perdão, o código que enviei anteriormente era somente para que ele fique alinhado nos dispositivos moveis. Para que você consiga redimensionar a altura e a largura troque este “a.tag-comprar.fundo-principal” por este código aqui:

a.tag-comprar.fundo-principal {
margin-top: 70px;
margin-right: 85px;
height: 30px; /* aqui você regula a altura /
width: 87px; /
aqui você regula a largura */
display: flex;
align-items: center;
}

Maravilha!!
Agora deu certo, @plugoo
Agradecemos demais a força e dedicação.
Deus lhes abençoe!!!

1 curtida

@Mogano_Studio desculpa a demora! Que bom que conseguiu resolver fácil.

Acho que cheguei atrasado, mas fiz um vídeo mostrando como customizar o botão. Espero que ajude outros também.

Customizando botão “comprar” na LI

Para baixar o código pronto é só clicar aqui.


Douglas Medina

Especialista em e-commerce

Conteúdo :zap: douglasmedina.com + Youtube
Mentoria :zap: Aulas particulares
Curso Online :zap: Personalização Avançada
Whatsapp :zap: Construção de lojas

Não se preocupe, Mestre
Assistirei assim mesmo e deixarei aquela força para você lá.
E também agradeço o seu esforço em nos ajudar, pode ter certeza, nas nossas dificuldades em encontrar soluções, entrarei em contato contigo também.
Deus lhe abençoe!!

1 curtida

E se eu quiser retirar o botão “ver mais” na versão mobile, como faço? Na versão desktop eu consegui com esse código:

.listagem-item:hover .acoes-produto {
display: none;
}

1 curtida

Consegui, para tirar o botão “Ver mais” na versão mobile, o código é esse:

a.tag-comprar.fundo-principal {
display: none;

1 curtida