Profile card component main - HTML & CSS Flexbox, Grid & No JS

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted over 3 years ago

  👋Hi Pop Andrei!

  Thanks for leaving your kind words on my solution 😊.

  Some feedback on this solution:

  • I would not recommend to limit the height of the card. Let the content inside it control the height of it.
  • I notice that you often use % percentage units. I would recommend to use rem or em instead to make the size consistent among devices.
  • I would highly recommend to use details and summary tag instead of input tags.
  • You don't need to specify the height: 100%; of the body and html elements, it's unnecessary.
  • For the card images, what I did, I used img element for overflowing images and use CSS background-image for the rest of it. To position it, in my opinion there's no the exact way to do it, since it all depends on your HTML markup and the way you position it. So, try hacking around until you think that the position similar to the design.

  That's it! Hopefully this is helpful!

  10

  Marked as helpful
• 

  Harsh Jain•475

  @thisisharshjain

  Posted almost 4 years ago

  Heyyy pccipru, Nice work man! Making this in vanilla HTML CSS is another challenge and you did great. I found a few small issues:

  1. If i click all accordions then top and bottom one's are cut (You can either increase height of container accordingly or maybe wrap all accordions inside a div and set overflow-y to auto)
  2. Below 1200px width the image on left doesn't stays in center
  3. On mobile screens, give .text-container a little padding. That will look little better Everything else looks good to me 😄 Keep grinding 💪🏻

  12

  Marked as helpful