Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Product Card Component

@munyite001

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any and all feedback is welcome.

Community feedback

Fatlind Shehu 2,230

@fatlindshehu

Posted

Hi Emmanuel, Nice work over there! Here are my suggestions on how to improve your card:

  • Create a main component and center it in the middle using flex
  • Create two child components inside the main one for the image and one for the text use flex to align them.
  • Give padding around the text component in order for the element to be in line with one another.
  • Using flex change the flex-direction: column to make the component responsive on smaller devices.
  • If you're unfamiliar with flex check this LINK

Keep up the good work

Marked as helpful

1

@munyite001

Posted

@fatlindshehu Yea Thanks for the Heads Up. I just looked at the comparison and they were varying , so I implemented using your suggestions, and I gues it's better now

0
Fatlind Shehu 2,230

@fatlindshehu

Posted

@munyite001 I think it looks much better, great work!

Happy coding...

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord