2
respostas

CSS de botões não está funcionando corretamente. CSS da tag main idem.

Abaixo o esqueleto da minha aplicação.

<app-cabecalho></app-cabecalho>
    <main>
        <app-criar-pensamento></app-criar-pensamento>
    </main>
<app-rodape></app-rodape>

Abaixo, a imagem de como a estilização está sendo formatada. Falta o background e o espaçamento para o container de criação de pensamentos.

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeComo pode ser visto na imagem acima, os botões também estão sem estilização.

<div class="acoes">
      <button class="botao">Salvar</button>
      <button class="botao">Cancelar</button>
    </div>
  </form>
</section>
.acoes {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.botao {
  margin: 5px;
  margin-top: 70px;
  width: 200px;
}
2 respostas

................................

Olá, Nicolas! Tudo bem?

Pelo código que você compartilhou, parece que você está enfrentando um problema na estilização dos botões e da tag <main> na sua aplicação Angular. Vou tentar te ajudar!

Para resolver o problema de estilização dos botões, sugiro verificar se o arquivo CSS onde você definiu as classes .acoes e .botao está sendo importado corretamente no componente onde esses botões estão sendo utilizados. Certifique-se de que o caminho do arquivo CSS está correto e que não há erros de digitação.

Além disso, verifique se as classes .acoes e .botao estão sendo aplicadas corretamente nos elementos HTML. Você pode fazer isso inspecionando o código HTML gerado no navegador e verificando se as classes estão presentes nos elementos correspondentes.

Você pode testar atribuindo uma cor de fundo ou cor nos textos, para ver se a classe está funcionando.

Espero ter ajudado e bons estudos!