Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Erros na exibição dos elementos do projeto AluraPlay.

Olá, pessoal. Boa noite.

Em meu projeto do AluraPlay eu apliquei o align-self nos elementos do menu, mas eles não ficam centralizados. Coloquei a tag li ao lado da classe ".menu__lista li", mas aparentemente o VS Code não identifica que se trata de uma tag, porque a cor dela deveria ser roxa e não amarela como a da classe. Além disso, outro problema que estou tendo é com o layout do projeto para desktop. Quando maximizo a tela (em 100%), o menu lateral esquerdo fica apenas com 5 elementos, já quando minimizo (em 90%) todo o restante aparece. Por que isso acontece? É algum problema no código?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Agradeço, desde já.

3 respostas

Olá, Stephanny!

Vamos lá tirar suas dúvidas! Para isso, separarei em tópicos pra facilitar, ok?

  • Temas: A forma como você digitou as classes junto com a referência das tags está correta, o fato das cores não estarem mudando é o tema padrão que você está utilizando no VS Code (Tema: Dark Modern). Para colocar um tema que seja de melhor apresentação dos elementos, recomendo que escolha o Tema Monokai.

Para mudar o tema, te darei o diretório a seguir: File > Preferences > Theme > Color Theme > Monokai. Ou, se preferir, use os atalhos do teclado Ctrl + K + Ctrl T.

  • Código: O pouco que observei, o código parece um ouco diferente da aula e pedirei que me mande alguns prints do código HTML e CSS juntamente com os prints da execução do projeto, ok?

Fico no aguardo!

Olá, Felipe.

Claro, seguem os prints do HTML, CSS e da tela do projeto para mobile/tablet e desktop.

1.Os elementos do menu inferior descentralizados:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

  • Código do CSS:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2.Variação do menu lateral esquerdo:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade

  • Código do HTML:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade

solução!

Desculpe a demora!

Detectei que no ".menu__lista", o professor adiciona, também, a propriedade "height: 100%;".

Acredito que, com ela, você consiga solucionar seu problema.

Linha 24 ~ 26 do arquivo flexbox.css.

Caso não tenha conseguido solucionar seu problema, não hesite em perguntar :)