Alterar posição do campos - oferta do dia

Bom dia. Gostaria de alterar a posição dos campos (Frete grátis e desconto)
Ambos os campos estão na posição errada, estão acima do produto, gostaria de alterar a posição para baixo.

Link: https://www.blazelongboards.com.br/ofertas-especiais

Tenta usar esse código:

.mega-recebe-prod > #listagemProdutos > ul > li > div > div.bandeiras-produto {
    top: 90%;
}

Depois tenta adicionar mais produtos nessa seção para ver se o código serve para todos eles.

2 curtidas

Será que conseguimos alterar o tamanho do produto?
Da uma olhada como ficou José.

posição do produto

Para mim está normal:

Mas quando eu diminuo o tamanho da janela a imagem realmente fica menor.

2 curtidas

Estranho José o meu está pequeno a imagem, forme o print que eu te enviei. Qual navegador você está utilizando? Até abri o Google Chrome em modo anônimo para ver se resolvia. Porem ele continua pequeno.

Estou no Google Chrome também.
Você tentou aumentar a resolução do seu navegador? A imagem parece diminuir de tamanho quando sua resolução não é grande o bastante para caber toda essa caixa.

1 curtida

Parece que em telas com alturas menores do que 660px, a imagem é redimensionada para ficar menor.

Achei o culpado para isso:

@media screen and (max-height: 660px)
.menu.superior #listagemProdutos.listagem .imagem-produto {
    height: 100px;
}
2 curtidas

José eu fiz a alteração porem continua da mesma forma.
Não sei dizer se é algo com o meu navegador, já que para voce está normal.

Tenta usar esse código para forçar a imagem a continuar com o tamanho original dela:

@media screen and (max-height: 660px) {
    .menu.superior #listagemProdutos.listagem .imagem-produto {
        height: 200px;
    }
}
2 curtidas

José o tamanho está perfeito.
Só mais um detalhe que eu gostaria de alterar. Quando eu passo o mouse em cima. O produto some e fica com esse aspecto do print. O botão comprar fica acima do outro.

Faz um teste com esse código:

/*Altera opacidade da imagem*/
.listagem .listagem-item:hover .imagem-produto.has-zoom .imagem-principal {
    opacity: 0.4;
}
/*Altera posição do botão Comprar*/
#listagemProdutos.listagem .listagem-item .acoes-produto, .listagem.aproveite-tambem .listagem-item .acoes-produto {
    top: 45%;
}

Aí você vai alterando o valor daquele top: 45%;para deixar o botão na posição desejada.

2 curtidas

José tá show. Agora só para finalizar, conseguimos fazer um ajuste na parte de baixo?
só para alinhar os campos. Gostaria de deslocar o campo frete para gratis um pouco para esquerda.

Naquele código que você já inseriu para alterar a posição desses 2 botões, acrescenta essa linha:

/*Alterar a posição dos campos oferas do dia, corrigi uma sobreposição dos campos - Frete gratis e desconto*/
.mega-recebe-prod > #listagemProdutos > ul > li > div > div.bandeiras-produto {
    top: 90%;
    right: 5px;
}

Aí é só alterar o valor do right: 5px; para alinhar os dois botões.

2 curtidas

Ficou perfeito José. Muito obrigado, mais uma vez.

1 curtida

José. O camando alterou tambem o local do botão comprar na pagina principal.
Será que é possivel alterar isso. Na pagina principal eu gostaria que o botão comprar ficasse a baixo dos valores.

Tenta atualizar esse código:

/*Altera posição do botão Comprar*/
.mega-recebe-prod > #listagemProdutos.listagem .listagem-item .acoes-produto, .listagem.aproveite-tambem .listagem-item .acoes-produto {
    top: 45%;
}

Acrescentando esse trecho inicial .mega-recebe-prod > o código deve se tornar exclusivo para o menu de ofertas.

2 curtidas

José ele acertou da tela de ofertas, porem da tela principal não. Posso ter feito alto errado.

Faltou deletar o código anterior, você está com os dois ativos:

/*Altera posição do botão Comprar*/
#listagemProdutos.listagem .listagem-item .acoes-produto, .listagem.aproveite-tambem .listagem-item .acoes-produto {
    top: 45%;    
}

/*Altera posição do botão Comprar*/
.mega-recebe-prod > #listagemProdutos.listagem .listagem-item .acoes-produto, .listagem.aproveite-tambem .listagem-item .acoes-produto {
    top: 45%;
}

É só apagar o primeiro código que deve resolver esse problema.

1 curtida

Perfeito José. Deu certo aqui. Muito Obrigado.

1 curtida