Na tentativa de adaptar o projeto Portfolio para uma tela de 480px de largura, o conteúdo da página fica cortado caso eu retire o padding da main
Mas assim que eu zero o padding da tag main no css fica como na imagem abaixo
Como resolvo este problema?
Repositório com o código fonte. O arquivo principal é o index e o css responsável pela estilização é o style.css dentro da pasta styles.
Lembrando que o que está me deixando com uma pulga atrás da orelha é o fato de o conteúdo da página se auto organizar com uma padding mas não manter essa mesma capacidade de auto organização quando retiro a padding, creio que era para ficar mais fácil para o conteúdo se auto organizar. Não?
Olá Rafael, tudo bem?
O padding nesse caso está colaborando muito para o conteúdo ficar com esse espaçamento lateral, meio que mantendo centralizado.
Você pode remover o padding e tratar cada conteúdo, por exemplo deixando eles centralizados com o display-flex ou utilizando margens e paddings individualmente, isso tudo dentro do @media na parte responsiva, seria legal diminuir o tamanho das fontes do título e do texto também para dispositivos móveis.
Espero ter ajudado e bons estudos!
Opa, irei testar e dar o retorno aqui, obrigado! Lembrando que eu acabei de finalizar os quatro cursos inciais de HTML e CSS. Queria ter a chance de praticar um pouco o que foi estudado. Acha que refazer o projeto do Figma sem olhar o código escrito no curso é uma boa para praticar? Conhece algum site legal que me dê desafios de HTML e CSS? Existe um lugar no Figma onde eu posso encontrar vários projetos de layout como o do curso para implementar e praticar?