I use flex-box and grid

Community feedback

• 

  Tenzin Choeda•210

  @tenze21Posted 11 months ago

  woah... it looks like your order summary component has a lot of work to do. Everything is falling out of place.

  0

  ---

  

  Duvan Rodriguez•120

  @TkDevkPosted 11 months ago

  @tenze21 Yup😂

  0
• 

  Duvan Rodriguez•120

  @TkDevkPosted 11 months ago

  I just checked it and the image looks apart :'c, damn.

  I guess that it doesn't matter the default width and height values

  0

  ---

  

  Marcos Travaglini•4,840

  @BlackpachamamePosted 11 months ago

  @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.

  Marked as helpful

  1

  

  Duvan Rodriguez•120

  @TkDevkPosted 11 months ago

  @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.

  0

  

  Marcos Travaglini•4,840

  @BlackpachamamePosted 11 months ago

  @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.

  Marked as helpful

  2

  

  Duvan Rodriguez•120

  @TkDevkPosted 11 months ago

  @Blackpachamame gracias man 🤗

  1