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

Nft Preview Card Component

@isabellatressino

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

Adriano 37,030

@AdrianoEscarabote

Posted

Oi Isabella Tressino, tudo bem? Gostei muito do resultado do seu projeto, mas tenho algumas dicas que acho que você vai gostar:

Prefira usar rem do que px para ter uma pagina trabalhando melhor entre navegadores, e redimensionar os elementos adequadamente.

se você quiser continuar codificando com px, pode baixar uma extensão muito útil no vscode, que converte px em rem! link -> px to rem

Uma boa prática para centralizar o conteúdo é usar grid ou flex-box, evite usar margin ou padding para fazer posicionamentos, use apenas no último caso! podemos fazer assim:

flex-box:

body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
}

grid

body {
    display: grid;
    min height: 100vh;
    place-content: center;
}

o restante está ótimo!

espero ter ajudado... 👍

Marked as helpful

0

@isabellatressino

Posted

@AdrianoEscarabote Oi Adriano, obrigada pelas dicas! Apliquei o flex-box no body, ajudou muito.

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