@FelipeCastroDEV
Posted
para fazer essa divisão 50%/50% ficaria mais simples usar display grid
eu fiz algumas modificações no seu código, vou mandar aqui dai vc testa ai!
body { display: flex; justify-content: center; align-items: center; /* height: 100vh; Removido*/ background-color: var(--background-color); padding: 20px; /Adicionado/ }
.main.product-card { max-width: 600px; /* Colocamos um tamanho maximo no seu container */ display: grid; grid-template-columns: 1fr 1fr; /Principal comando para divisao 50% / 50%/ align-items: center; background-color: var(--card-and-btn-text-color); border-radius: 1rem; }
div.product-img { background: url("../images/product.jpg") no-repeat center; background-size: cover; width: 100%; height: 100%; border-radius: 1rem 0 0 1rem; }
div.product-details { display: flex; flex-direction: column; width: 100%; padding: 3rem; gap: 2rem; }
1fr equivalem a uma fração do espaço disponível na grid, sendo assim 1fr 1fr vai dividir o container em duas partes de 50% iguais, caso queira 1/3 seriam 1fr 1fr 1fr e assim vai.
Espero ter ajudado!!
A proposito gostei da sua solução com flex, parabéns.
Marked as helpful