@correlucas
Posted
👾Hello @HawkEyeB, Congratulations on completing this challenge!
Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:
1.The image is not responsive yet, a quick way to make any image responsive and respecting the container size is to add display: block and max-width: 100% to the <img> selector. To improve the responsiveness even more adding the auto-crop property you can add object-fit: cover to make the image crop inside the container its inside.
img {
display: block;
object-fit: cover;
max-width: 100%;
}
2.Remove the background and the image bg from the container and add to body to make sure this will display full screen and not get cropped.
3.To improve your component overall responsiveness, something you can do its to create a media query to save space in the pricing section to make each information in a different row. Here’s the code for this media query.
.information-card {
display: flex;
grid-template-columns: 30% 40% 30%;
align-items: center;
background-color: hsla(225, 100%, 94%, 0.267);
border-radius: 1em;
padding: 1em;
flex-direction: column;
}
}
✌️ I hope this helps you and happy coding!
Marked as helpful
@HawkEyeB
Posted
@correlucas Eu esqueci de por o block e acabei nem notando de tão bem que o código funcionou dessa vez.
Eu não entendi a alteração proposta. Poderia me explicar melhor?
@correlucas
Posted
@HawkEyeB Era só pra deixar o card mais responsivo e deixar a seccao de preço em duas linhas dps dos 340px quebrando o texto.
@HawkEyeB
Posted
@correlucas Eu li em algum documento que não se preocupar muito abaixo de 375px devido a quase nenhum dispositivo hoje em dia ser desse tamanho (Exceto smart watch). É verdade?
