4
respostas

Posicionamento de elementos section/div

Pessoal,

Segue meu GitHub e meu html-vercel para que possam melhor analisar.

GitHub: https://github.com/thaistech/projetoweb1 Vercel: https://projetoweb1.vercel.app/skills.html

Sobre responsividade ensinada para tela celular, pagina skill: O titulo se desloca, não acompanhando os subtítulos, como nas paginas home e sobre mim.

Sobre posicionamento para tela celular, pagina skill: Quero que os elementos fiquem um abaixo do outro, já testei com todas as flexs e grids.

A pagina skill, seria a curriculum, mas, como o esboço é livre, fiz desta forma onde vou colocar tudo que eu for aprendendo.

Desde á obrigada!

tela celular

4 respostas

Olá, Thaís.

Tudo bem?

Em relação ao título " Front-end" você precisa diminuir a fonte dele dentro do @media, pois tamanho normal que está, fica legal em telas maiores, já para menores o título está grande.

Na parte da responsividade você precisa alterar o grid-template-columns, para uma coluna só dentro do @media, para ele ficar um card em baixo do outro.

Por exemplo colocando uma coluna com a largure de 50% da págima:

@media (max-width: 1200px) { 
    .apresentacao__skill {
        grid-template-columns: 50% !important; 
    }
}

Eu coloquei esse !important no final, porque com ele a propriedade entende que é obrigatório adicionar esse estilo caso tenha outra classe com o mesmo estilo, evita conflitos.

Outra coisa, vi que no seu código CSS o @media está no meio do código, o ideal é você colocar os @media no final do arquivo CSS para manter o código organizado.

Espero ter ajudado. Qualquer dúvida manda aqui de novo. Valeu.

Renan, tudo bem por aqui, e por ai?

Valeu pelas orientações e dicas!

Corrigi e fiz outras alterações, mas, sobre posicionamento do titulo, agora no modo visualização de tela para computador, o titulo ainda se desloca, não acompanhando os subtítulos, como nas paginas home e sobre mim. Ambas imagens esão com 50% de zoom, se pudr dar uma dica sobre como resolver esse problema de dimensão/responsividade, agradeço!

pagina skill

pagina sobre mim

Tenta centralizar o texto com o display-flex, ou com o text-align: center; se mesmo assim não centralizar, você vai precisar definir a tag pai do título com o width: 100%; para ocupar 100% da tela e o título poder centralizar.

Renan,

Então, não é para centralizar, como eu comentei, agora não se trata mais de responsividade para tela de celular, estou falando da tela para computador. E não é para ficar centralizado, é para se manter como as das outras paginas, conforme imagem. Perceba que é para ficar alinhado e sem deslocar como está o titulo SOBRE MIM abaixo e alinhado com o menu, quero assim no titulo Fronte-end, na tela para computador.