QRcode/Frontend Mentor

Community feedback

• 

  AkamineFabio•220

  @AkamineFabioPosted about 1 year ago

  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

  0