I use flex-box and grid

@tenze21 Yup😂

@TkDevk This is because you put a height with vh, so it will change depending on each screen, on some it will look good and on others it won't. I tried setting a height: 580px to your #card and it looks fine.

Also, remove the object-fit: contain from your #card-picture img. And the height: 25svh of your #card-picture. This is enough for the image to fit the width of the card.

@Blackpachamame Hi marcos, thank you for your feedback. You are right, i don't the height value for the image.

But i have a question regarding the css units, what do you think that is the better choice when it comes to design something like a card could be better vh or px? i was doing this thing moving numbers with VH but it doesn't look as good as PX, i would like to say that is better px but maybe if you can advise me about the units i will be grateful.

@TkDevk Es buena pregunta, voy a responderte con lo que vi y leí en algún lado y por experiencia propia.

• El vh se usa para cuando necesitas "jugar" con el viewport de la pantalla, por ejemplo, que en la pantalla se vea una imagen en específico y al scrollear hacia abajo veamos otra imagen distinta y así sucesivamente. Normalmente lo usamos para centrar el contenido del body
• Los px (Unidades absolutas) por lo general se usan para medidas muy pequeñas, por ejemplo, los border o los border-raidus
• Los % se usan para las fuentes
• Por otro lado, los em y rem (Unidades relativas) suelen usarse para el resto porque se adaptan mucho mejor a los cambios en la pantalla que los px

Pero esto es a mi parecer, para profundizar en el tema tendrás que investigar y probar por tu cuenta. Igual te dejo este artículo por ahí te sirve.

@Blackpachamame gracias man 🤗