@correlucas
Posted
Aqui Gustavo mais uma dica pra vc
Quando esse componente vai ficando mto pequeno o texto começa a ficar muito colado, um jeito de melhorar isso é fazer com que a parte dos preços fiquem em linhas diferentes depois de uma determinada largura, por exemplo essa media query que apliquei pro seu código:
@media (max-width: 350px) {
.price {
font-family: "Fraunces", serif;
font-size: 1.875rem;
margin-top: 1.25em;
display: flex;
align-items: flex-start;
color: var(--primary-dark-cyan);
flex-direction: column;
}
}
Pra reduzir o seu código e deixar o arquivo de CSS muito leve e melhorar o carregamento da página você pode usar essa ferramenta chamada CSS Minify
que reduz o código css removendo caracteres desnecessários. https://www.toptal.com/developers/cssminifier
Marked as helpful