# Session: MonkChat - Responsivo
>[color=purple]**Autor:** Letícia Rodrigues da Silva
**Turma:** IndoD
**Número:** 25

[toc]

**Link CodeSandBox: https://codesandbox.io/s/monkchat-1zlyw?file=/src/pages/home/responsivo.css:0-1337**

## Códigos css

@media (max-width: 400px) {
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .cabecalho {
    flex-direction: column;
    align-items: center;
    margin: 0px;
  }

  .traco {
    display: none;
  }

  .logo img {
    width: 70px;
  }

  .titulo {
    font-size: 24px;
  }

  .box-site {
    flex-direction: column;
    width: 20.5em;
    height: auto;
    margin: 2em 0em 0em 0em;
  }

  .text1,
  .text2 {
    font-size: 20px;
  }

  .box-nmsala input {
    width: 12.5em;
  }

  .box-nm input {
    width: 12.5em;
  }

  .box-botoes {
    flex-direction: column;
    align-items: center;
    margin: 20px 15px 0px 0px;
  }

  .botao1 button {
    width: 16.5em;
    margin: 0px;
    border-radius: 3px;
  }

  .botao2 button {
    width: 16.5em;
    margin: 0px;
    border-radius: 3px;
    margin: 5px 0px 40px 0px;
  }

  .texto {
    font-size: 20px;
  }

  .caixa-texto textarea {
    width: 19em;
  }

  .botao button {
    width: 16em;
    margin: 0px;
    border-radius: 3px;
    margin-top: 5px;
  }

  .box2 {
    margin: 0px;
  }

  .box-maior {
    flex-direction: column;
    margin: 1em 1em;
    width: 18em;
    height: auto;
    overflow-y: unset;
  }

  .circulo img {
    width: 20px;
    margin-right: 20px;
  }

  .t1 {
    font-size: 14px;
    line-height: 40px;
  }
}