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

NFT Preview Card Component - Flexbox

burak.v 80

@vonaser

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I am not sure that I applied responsiveness to this design correctly. So, what do you suggest for improving this design's responsiveness?

Community feedback

@SuhodolecA

Posted

Hey! Great job! But I think you can do better! I noticed there are empty alt attributes in your html code. It might be better to fill it in. I also recommend you to add transition property in order to add smoothness for interactive elements. And last, сhange fixed width and height of your card, it must be responsive.

Marked as helpful

0

burak.v 80

@vonaser

Posted

Hey! Thanks for the feedback. I added aria-hidden attribute to the images, so I didn't find it necessary to fill alt attributes. If it's needed, I'll fix it. Lastly, I've used rem unit for width and height. I thought that it is useful for responsiveness. What can I use instead of that?

0

@SuhodolecA

Posted

@vonaser You can try to use max-width instead of width. Don't set the height at all, let content control that, or if you want to set height then use 'vh' units. Well done that you use rem is a good practice and give you flexibility. It's only my opinion. You can do whatever you want. Thanks and good luck!

Marked as helpful

1
P
AK 6,700

@skyv26

Posted

Hi! Burak, Really nicely made, I checked your design responsiveness and I noticed 2 issues, or rather than issues, I would say just need some updation.

  1. In some mobile response, your card is not positioned to the middle of screen properly.

  2. <=375px mobile screen width, your design either have more space at left side of card OR have more space at right side of card, you can also check this, simply not have equal space at both sides. (LEFT and RIGHT).

Overall really good work.

Best Wishes

Marked as helpful

0

burak.v 80

@vonaser

Posted

@skyv26 Hi! thanks for feedback. I'll try to fix it.

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