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

3-column preview card component solution with grid-box and flex-box

akmata201 60

@akmata201

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

romila 3,570

@romila2003

Posted

Hi @akmata201,

Congratulations 🎉 on completing this challenge, it was a great attempt but there are some issues I noticed:

  1. When adjusting the screen size from desktop to mobile, the card did not respond very well. The design looks good in the desktop version however as you decrease the screen size to mobile and tablet, the card becomes very squashed and awkward which would affect users using those particular screen sizes. A way to adjust this, is to follow the mobile-first approach as it would be easier to adjust the elements and texts within the card as you increase the screen size. If you unsure about this concept, then you should research more about this concept in depth through various sources.
  2. Also, in mobile screen, the top part of the card is cut off which may be due to the height being set at 100vh.
  3. The width for the buttons at the bottom of the card, seem quite long so you should reduce the padding for them.

Overall, it was a good attempt and wish you the best for your future projects so keep coding 👍.

Marked as helpful

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