Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Maximum effort

@Jorggyh

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Oi Jefferson, tudo bem? Parabéns pelo desafio!

Aqui uma dica sobre responsividade pra melhorar a section do preço

Quando esse NFT card vai ficando mto pequeno o texto começa a ficar muito colado, um jeito de melhorar isso é fazer com que a parte dos preços fiquem em linhas diferentes depois de uma determinada largura, por exemplo essa media query que apliquei pro seu código:

@media (max-width: 350px) {
.price-time {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
}
}

👋 Espero que essas dicas tenham sido úteis e continue codando!

0

@Jorggyh

Posted

@correlucas nos 320px você acha que está muito perto ? eu não achei https://i.postimg.cc/prxr8sGL/320.png

O que percebi é que abaixo de 325px está gerando uma margem a direita, isso pq o overlay (efeito hover na imagem) está fixo em 300px, ou seja abaixo de 350px ele está transbordando, na hora que desenvolvi não adaptei pra telas menores que 350px, queria saber qual a porcentagem de usuários com essa resolução, o 320 tá na hora de se aposentar.

0
Lucas 👾 104,420

@correlucas

Posted

@Jorggyh vc tem razão, agora q fui ver isso, no meu eu coloquei esse media query pro pricing e pra section do creator pra quebrar em duas linhas, mas as vezes nem é tao necessário, eu só faço pq gosto de deixar o mais responsivo possível 😂

1

Please log in to post a comment

Log in with GitHub
Discord logo

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