i have started handling grid and flex way better than before,
KorriganMaster
@KorriganMasterAll comments
- @UmarMubeeenSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?@KorriganMasterPosted about 2 months ago
Nice solution !!
Here's some tips though :
- on your body you should use h-dvh class instead of h-screen to prevent the scrollbar on mobile device
- maybe you could increase buttons height a little
- the hover animation on buttons required in the spec is missing
By the way I'm wondering why did you choose to use
<button>
tag in place of<a href="...">
?0 - @MarcWebDevSubmitted 2 months ago@KorriganMasterPosted 2 months ago
Hi compared, to the required screenshot it seems you have a font issue. Your letter spacing seems to be a little too high, if you look into the Figma file in the design system part, all font preset have a letter spacing of 0px.
Hope this is helpful, have a nice day
Marked as helpful1 - @SouhailM07Submitted 10 months ago@KorriganMasterPosted 2 months ago
Hi o/,
I can notice some differences between your solution and the required one, for exemple:
- the size of your card
- your background color is gray instead of slate-300. You're using Tailwind, so the bg-slate-300 should do the trick :)
- your box shadow seem smaller than the required one
You're using the h-screen class for the height of your main container. On some mobile device a scrollbar may appear as this class does not take into account the browser interface. You should look this h-dvh (dynamic viewport height) class instead :).
Have a nice day.
Marked as helpful1