Card component with HTML and CSS

Community feedback

• 

  Purnima Kumar•390

  @purnimakumarrPosted over 2 years ago

  Hey strael12,

  I would suggest a few changes to make you solution better:-

  1. Right now you have width: 37% on the .container-form. I would suggest setting the width in px instead of % beacuse right now the card's width is very less for screen sizes 1024px to 1440px. You can use max-width: 700px. This way the card's width does shrink appropriately for smaller screens but doesn't expand for bigger screens.

  2. You can add a border-radius: 9px 0 0 9px on the card image to get rounded edges just like in the design.

  Marked as helpful

  1

  ---

  

  Rafael Macedo•30

  @strael12Posted over 2 years ago

  @purnimakumarr Yep, you're right, I use 1920px on my screen, but when I posted it happens, I really didn't see it, I will fix it, thanks for you help.

  0
• 

  James Ebimobowei Osuobeni•160

  @EbibeniPosted over 2 years ago

  Nice one I think you need to improve on the dimensions for your div tags. The width should be around 60-70% of the height. The image is stretched. You can use the "object-fit: contain" to make an image contained to the size of any given div. Grid is a fine tool to use but as for a beginner i would prefer using DISPLAY:FLEX as it is easier to control for this type of content.

  Try to solve these problems one at a time. Nice work.

  0