flexbox

Community feedback

• 

  namlh•630

  @namlh023Posted almost 3 years ago

  Hi TerrenceArceo,

  • Just add border: 1px solid #fff; border-radius: 50%; to your .creator img and you good to go.
  • And remember styles active mode for your card :)

  Marked as helpful

  0

  ---

  

  Terrence Arceo•60

  @TerrenceArceoPosted almost 3 years ago

  @namlh023 Thank you so much for the help sir!!

  0

  

  namlh•630

  @namlh023Posted almost 3 years ago

  @TerrenceArceo You're welcome!

  0
• 

  David Osorio•560

  @osoriodevPosted almost 3 years ago

  Hello @TerrenceArceo 👋

  You can easily add a border with border: 1px solid white, and to make it fit the image add: border-radius: 50%

  I would recommend using a tags for the creator's name and another within the title, since in theory it is a link to the person's profile and the NFT itself.

  Overall, you result looks great 👍

  Marked as helpful

  0

  ---

  

  Terrence Arceo•60

  @TerrenceArceoPosted almost 3 years ago

  @osoriodev Wow! LOL this solution actually makes sense! I added border: 1px solid white; at first and it was giving me a square! how did I not think of border-radius! LOL thank you so much, man!

  0
• 

  Alex•660

  @al3xbackPosted almost 3 years ago

  Hi Terrence,

  There are several ways to do that:

  • Add missing border properties

  .creator img {
     ...
     border-width: 1px;
     border-style: solid;
     border-color: #fff;
     border-radius: 50%;
     ...
  }
  

  • Using box-shadow

  .creator img {
     ...
     box-shadow: 0 0 0 1px #fff;
     border-radius: 50%;
     ...
  }
  

  • Using drop-shadow

  .creator img {
     ...
     filter: drop-shadow(0 0 1px white);
     ...
  }
  

  • Edit the image using photoshop

  • Wrap the image with <figure> and add pseudo element (::before or ::after) also can.

  0

  ---

  

  Terrence Arceo•60

  @TerrenceArceoPosted almost 3 years ago

  @al3xback I just literally started using frontendmentor like 3 hours ago, and I'm learning so much from the community already! Thank you so much for the feedback! I'm not even familiar with the 3rd solution you've given me, but wow! one liner solution! i'd def use that in the future! thank you so much sir!

  1