Skip to content
OverviewSolutions
8
Comments
2
AkamineFabio
@AkamineFabio

All comments

  • AkamineFabio•220
    @AkamineFabio

    Opa!

    • Diria que a dificuldade está por você ter colocado margin usando %, então vamos dizer que a tela tenha 400px de largura. Como você usou 39% de margin para as laterais, o elemento em sí só terá 20% de espaço para seu conteúdo.

    • Para centralizar o elemento, você pode definir uma largura para esse card, por exemplo width:300px; e alterar as margin-left e margin-right para 'auto' margin-left:auto; e margin-right:auto; Você pode usar o 'shortcut'(atalho) do margin fazendo margin: 5% auto 10%; (no seu caso). esse é um atalho para margin:top leftright bottom;

    • O 'auto' funciona assim: você tem 1000px de tamanho de tela, e você tem um elemento(no caso o card) de 300px. Então ele irá calcular 1000-300 = 700px sobrando. Se você usar o margin-left:auto, ele irá pegar esses 700px disponíveis sobrando e irá aplicar para ele. Isso deixaria o elemento o mais a direita possível. Como você depois que aplicar esse margin-left e margin-right com o valor 'auto' tanto a esquerda quanto a direita vão pegar esse valor e usar para eles, então vai ser 700/2=350px. O margin-right irá ficar com 350px e o margin-left também. Essa conta vale para outros tamanhos de tela, ele sempre irá pegar o valor disponível, então quando o dispositivo for pequeno, essa margin irá ficar cada vez menor.

    • Caso tenha ficado alguma dúvida ou a explicação não foi clara, pode me mandar uma mensagem, eu vou responder assim que possível! Aqui está, é só substituir o conteúdo da sua .principal por essa:

      background-color: hsl(0, 0%, 100%); margin: 5% auto 10%; padding-top: 20px; padding-right: 40px; border-radius: 20px; width: 300px;

    Marked as helpful
  • AkamineFabio•220
    @AkamineFabio

    I would use relative units for paddings, but this is just my opinion. I like to use relative units, cause if you change the font-size, your paddings and other things will keep the proportion with the font-size. Again, only my opinion, I'm new in web developer's world, but this is something I see often, developers using relative units, cause then for example, in a project, your client ask you to change the font-size, you would need to change everything you use px. If you put those relative sizes, you just need change the font-size and everything will keep the proportion. Sorry for my bad english, I'm brazilian and I'm still improving my english skills :)

    Marked as helpful