@A-amon
Posted
Hello! Great effort~ 😉
Here are some suggestions( or things I think can be fixed)
- Remove the
heightsetting from.card. Instead, set the height for the image, either in px or other units. I don't recommend usingvhorvwfor this height. 😀 - Remove
topsetting from.card. Then, set thebody's height to100vh. (The card is now at center for any size 🥳) - You are missing
h1andh2elements. Maybe put ah1element containing the challenge's title like<h1> NFT card challenge </h1>and hide it using a screen-reader only 👁 class (You can check these out - Ref1, Ref2. Also, read this to find out about heading tags' usage. - To center vertically, the icon and text inside
.ethand.timerespectively, you can give those two classes this:display:flex; align-items:center;. - Instead of using
position:absolute; right:1.5em;on.timeto align it to the right, maybe you can try outjustify-content:space-between;on.feature. 😉
Awesome work! 😀
Marked as helpful
@nlorens
Posted
Hi @A-amon !
Thank you so much for your feedback! I really appreciate it. My code looks more clean now after using display:flex as you have suggested. And the result looks neater. I struggle with aligning items, as you can see from my code, I tend to code it too specific😂 and it becomes less responsive. Happy to learn new ways to align/centering things!
Wow I didn't know that h1 is very important, so thank you for highlighting that! I need to spend some time to read the links that you shared and then I will also add the h1 tag to my solution😃
Regarding your first point, why you don't recommend using vh for the height?
@A-amon
Posted
@nlorens It will surely get better over time! 😉 About the vh for this image's height, it would be because different devices might have different heights so it would be hard to keep this image's appearance consistent on all of them if you use it. 🤔 This is just my opinion tho 😂!
@nlorens
Posted
thank you @A-amon 😁
@A-amon
Posted
@nlorens Glad to help!
