Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾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@JorggyhPosted about 2 years ago@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@correlucasPosted about 2 years ago@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 GitHubJoin 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