NFT Preview Card | Flexbox

Solution retrospective
Hi everyone! Any feedback is appreciated, please let me know there's anything I overlooked.
I also have a question about my overlay:
The height of my hover overlay is longer than the NFT image. In dev tools, I determined it to be 5px longer. I assumed this might be because there's no fixed height specified on the containing div
, but I'm not sure what's causing it to be longer. Please give me some advice on if there's a way to ensure that they're the exact same size.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @PhoenixDev22
Hello @sheronimo ,
I have some suggestions regarding your solution:
-
for the image hover, first it should be wrapped in an anchor tag as already stated. You can add
either
aria labelor
Sr onlytext or
alt`` text on the image that says where the link goes. -
The eye image doesn't really need to be in the html, you could do it with css.
-
You can use an unordered list
<ul>
to wrapclass="nft-info"
and in each list item would be<img>
and<p>
. -
No need for the
<hr class="divider" />
, you can useborder-top: ;
to theclass="nft-author"
. Also , to use more semantic tags , you can use<figure >
and<figcaption>
for class="nft-author"`.
Hopefully this feedback helps.
Marked as helpful -
- @NaveenGumaste
Hay ! shuberber Good Job on challenge
These below mentioned tricks will help you remove any Accessibility Issues
-> Always use the "alt attribute" and just leave it empty bt.. always add it with img tag.
-> Learn more on accessibility issues
Keep up the good work!
Marked as helpful - @denielden
Hi Shuberber, great work !
Add
aspect-ratio: 1;
for exact same size to the.overlay
classAnd don't forget
img
element needalt
attribute, it's very importantHope this help ;)
Marked as helpful
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