Skip to content
OverviewSolutions
9
Comments
6

Dumte Nwidoobee Joshua

@DumtePort Harcourt, Nigeria.140 points

I am a passionate Full-stack developer with focus on React/Nextjs for building front-end, Express.js for that back-end MongoDB as my database, Tailwind for my styling, Next-Auth for authentication. I believe in creativity, designing of visually appalling web-interfaces.

I’m currently learning...

Full-stack development as learning doesn't end

Latest solutions

View more solutions

Latest comments

  • Dumte Nwidoobee Joshua•140
    @Dumte

    Please I'm currently learning tailwind css. Can you connect with me on twitter so you can help me in the installation process?

  • Dumte Nwidoobee Joshua•140
    @Dumte

    Please take a look at my solution. I want you to suggest to me how to improve on it.

  • Dumte Nwidoobee Joshua•140
    @Dumte

    Yours is the simplest solution I think

  • Dumte Nwidoobee Joshua•140
    @Dumte

    The first thing here is to center the container both vertically and horizontally.

    body {
    min-height:100vh;
} 
main{
    display: flex;
    place-items: center;
}

    In this case your container will find itself at the very center of the browser.

    Note that I've replaced justify-content and align-items center with place-items: center; and it still does the same thing.

    Marked as helpful
  • Dumte Nwidoobee Joshua•140
    @Dumte

    Nice work dear. Honestly I did almost the same thing you did. By the same thing, I meant an unresponsive card.

    Four months later, I got more ideas to turn my code into mobile version but I have to leave it there so that I will get back to eat at some point in time and be motivated of how I have improved

  • Dumte Nwidoobee Joshua•140
    @Dumte

    You can position the card at the center of your page by applying these snippets

    body { display: grid; place-items: center; min-height: 100vh; }

    Secondly, your work is not responsive to mobile device. If you are using grid, in your media query, you can apply container{ grid-template-columns: 1fr; }

    To make it single column on mobile device.

    Thirdly, the topography of your card doesn't correlate with the actual design. The actual design doesn't have a button shadow.