Infelizmente estou tendo dificuldade em aprender o algoritmo responsivo
AkamineFabio
@AkamineFabioAll comments
- @Cristian-VVillaSubmitted about 1 year ago@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 helpful0 -
- @EhmkayelSubmitted about 1 year ago
I will be glad if you can help to view my code to check where I need to improve on
@AkamineFabioPosted about 1 year agoI 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 helpful0