Skip to content
Submitted about 2 years ago

NFT

Tomas•60
@TommyShelby21
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...NFT preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi, my third project. I had many problems with this one. How to make exact border around the avatar image? And how to make text centered with eth and clock icon? (i have it a bit low) And i dont have it responsive, i dont know why. For any tips i would be thankfull.

Community feedback

  • Ansh Mittal•80
    @phoenix-xrPosted about 2 years ago

    Hey, So I just reviewed your css file and found someone common mistakes which even I used to do.

    1. To make the container centered. You have apply flex center on container itself that's what your container is not centered. If you will apply flex center to body it will work perfectly!

    2. To give border to avatar image Add this css: border: 1px solid white

    3. To make text centered in clock thing. Wrap your text in a div and add "display:flex; align items: center;" to the parent div. To make your site responsive for mobile too you can use media queries in css.

    Hope this will help :)

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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