Fórum OpenCart Brasil

Por um e-commerce livre, confiável e profissional

Suporte para temas OpenCart v3.x.
#88797
Olá, pessoal! Tudo bem?

Estou com um "problema" no site que estamos desenvolvendo aqui pra empresa.
Pesquisei pelo termo "alinhar produtos" e encontrei alguns artigos, mas nenhum apontava para o tema da SHARMA.
Então não sei como resolver de forma mais assertiva essa situação.

Temos produtos em nosso catálogo com nomes maiores e outros com nomes menores. Quando o nome do produto tem 3 linhas no nome, os produtos ficam todos alinhados dentro do grid (OK), mas quando o produto tem 4 linhas no nome ele desalinha os produtos na linha abaixo (NOK).

Conforme imagem:
https://ibb.co/Gfwx126

Vocês poderão perceber que o primeiro produto da primeira linha possui apenas 2 linhas no nome e os dois produtos na sequencia da primeira linha possuem 3 linhas de nome. Isso reflete diretamente na segunda linha de produtos, onde o primeiro item fica posicionado ligeiramente mais acima que os demais produtos da segunda linha.

Sabem como solucionar esta situação sem que eu tenha que cortar/omitir o nome dos produtos?

Desde já muito obrigado! :mrgreen:
#88798
Ola @Henrique Lacerda
Isso de forma mais simples pode ser contornado atraves do CCS apenas,
No exemplo setamos a altura do "h4" para que ele sempre seja a altura inicial e final e então cortar o texto caso for maior que o permitido.
visto que é um exemplo, você deve ajustar conforme a sua fonte e a altura desejada.
Código: Selecionar todos
.product-thumb .caption h4 {
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    max-height: 50px;
    min-height: 50px;
    overflow: hidden;
}
#88852
Agora sim! Tudo testado e implementado.
Precisei adicionar apenas as linhas de max-height e min-height e, para não suprimir o nome completo dos produtos, o tamanho que defini foi de 90px (tenho produtos cujo nome ocupa com 4 linhas).
Muitíssimo obrigado novamente.
Saúde!

Gente preciso de ajuda urgente. Na migraç&a[…]

Caro @reds , muito obrigado pela resposta.

PHP 8+ incompatibilidade

Toda tradução para a versão 3[…]

Ola @alex3257 Se você precisa apenas ver […]