NFT Preview Card Component

Community feedback

• 

  Lucas 👾•104,280

  @correlucasPosted over 2 years ago

  Fala Gustavo, parabéns pelo desafio!

  Na minha solução eu consegui assim

  .creator img { 
     width: 32px; 
     height: 32px; 
     margin-right: 12px; 
     border: 1px solid var(--n-white); 
     border-radius: 50px; 
   }
  

  Link da minha solução https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX

  Depois me diz se funcionou

  1

  ---

  

  Gustavo de Camargo Campos•200

  @themegazordPosted over 2 years ago

  @correlucas Tentei aqui, e não deu certo, quando fui verificar também, a minha relação de tamanho ficou muuuito diferente, não sou a melhor pessoa quando o assunto é relação de tamanho kkkkkk, mas obrigado galera.

  0

  

  Adriano•42,740

  @AdrianoEscarabotePosted over 2 years ago

  @themegazord Fiz algumas mudanças no código pelo inspecionar do google e parece que consegui resolver o seu problema:

  .creation__profile img { width: 2rem; padding: 0; border: 1px solid #fff; border-radius: 50px; }

  Você pode ajustar o tamanho do jeito que você preferir.

  Mano uma dica valiosa para você: TIRA O SEU ENDEREÇO DO PERFIL auhauauahuauua

  0

  

  Gustavo de Camargo Campos•200

  @themegazordPosted over 2 years ago

  @AdrianoEscarabote Valeu mano, ele pegou o endereço do GitHub kkkkkkkkkk

  1
• 

  Pedro Souza•170

  @pedrohsouzaPosted over 2 years ago

  Olá, Gustavo, parabéns por concluir o desafio. Quanto a sua dúvida, você pode fazer o seguinte:

  border: 1px solid var(--white);
  border-radius: 50%;
  
  

  A primeira linha seta a espessura, o estilo e a cor da borda do elemento, mas a borda ainda vai ser quadrada. Na linha seguinte o border-radius faz com que a borda fique arredondada.

  1

  ---

  

  Gustavo de Camargo Campos•200

  @themegazordPosted over 2 years ago

  @pedrohsouza Oii, então, eu tentei fazer isso antes, porém, fica assim: https://prnt.sc/Rti8JzE__7dk, justamente pela imagem não ser quadrada.

  1

  

  Pedro Souza•170

  @pedrohsouzaPosted over 2 years ago

  @themegazord Dei uma olhada no seu código e pelo visto o <img> herdou um padding de algum outro ponto do código. Você pode contornar isso colocando um padding: 0 no elemento. Daí é só diminuir um pouco a largura pra imagem não ficar muito grande.

  1

  

  Lucas 👾•104,280

  @correlucasPosted over 2 years ago

  @pedrohsouza verdade eu nem me atentei a isso porque eu uso reset css pra tirar as margins e padding default de tudo 😂

  0

  

  Pedro Souza•170

  @pedrohsouzaPosted over 2 years ago

  @correlucas eu também kkkk, mas nesse caso o padding veio da imagem principal. O inspecionar elemento salva vidas.

  0

  

  Gustavo de Camargo Campos•200

  @themegazordPosted over 2 years ago

  @pedrohsouza Fiz aqui e deu certo, valeu gente. Meu erro além disso, foi não ter classificado as imagens. Vou me atentar a isso nas próximas :-)

  0