Skip to content
OverviewSolutions
3
Comments
3
KorriganMaster
@KorriganMaster

All comments

  • Umar Mubeen•80
    @UmarMubeeenSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    i have started handling grid and flex way better than before,

    Socialmedia Card

    1
    KorriganMaster•70
    @KorriganMasterPosted 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
  • KorriganMaster•70
    @KorriganMasterPosted 3 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 helpful
    1
  • KorriganMaster•70
    @KorriganMasterPosted 3 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 helpful
    1