Responsive Card Component

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  ** 👾Hello Tammy, congratulations for your new solution!**

  The component seems really good and I liked that you've fixed the hover effect by yourself doing your own research, this is a such big and important soft skill for developers, well done!

  The solution itself seems amazing, not much to add, my advice for your is to improve the component responsivity replacing the fix width with max-width and a transition to the hover effect to make more smooth the animation between active and inactive.

  This is good value for the transition, try it out:

  transition: all ease 0.3s;

  Hope it helps and keep it up, Tammy, you're improving.

  Marked as helpful

  0
• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Tammy, great job on your second challenge! It looks great to me 🙂

  One comment I have is, I see you have flex-wrap on your body selector right now, which I suggest you remove because you don't actually need it, and more importantly, at a certain breakpoint the footer and component will "unwrap" and become placed in the same row, which you would not want.

  Instead, to center the component horizontally, try to add margin-inline: auto; to your .wrapper after removing the flex-wrap, then change align-content: center to align-items: center in your body selector, and that should do it!

  One additional experiment: If you want to try making the component responsive, on the wrapper, change width: 300px to max-width: 400px and add margin:1rem, then resize the window and see what happens!

  Marked as helpful

  0

  ---

  

  Tammy•100

  @Tammy-AjokoPosted over 2 years ago

  @elaineleung Thank you so much for your feedback I took all you said into account and it was incredible I saw the magic 🤭 happen when I resized it and everything not only stayed in place to made the right adjustment it needed to. I did however add one thing and that was making my . wrapper height to be fit content. This was very helpful

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @Tammy-Ajoko You're welcome, glad I could help! 🙂

  0
• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hello man congrats on finishing the challenge!

  For me your CSS looks perfect, and the box-shadow that you added makes the solution even better than the original design!

  The only thing that I would probably change is the HTML, instead of having an h2 tag I would probably go directly for an h1, and instead of having the section inside of the divs I would do the reverse, the top part of the card with a section and the bottom part with other section, then inside this ones would go for the divs, and instead of using 2 spans for the prize and the time left, go for two p.

  But this are just non-important change since you probably wont use sections when using this component on a real project!.

  Anyway good work on finishing the challenge, and I hope that my feedback helps you!

  0