Desenvolvimento Web com HTML, CSS e JavaScript > Exercício: Responsividade com `@media`

Exercício: Responsividade com `@media`

Objetivo

Utilize as media queries para definir estilos diferenciados de acordo com o tamanho da tela.

Para telas de até 850px

As seções "Correspondência" e "Telefones" na parte de "contato" já não cabem mais uma do lado da outra:

Visual em telas de até 850px de largura {w=50}

Para telas de até 622px

Para telas de até 446px

Para telas de até 342px

Os números dos telefones estão no limite e quase já não cabem na mesma linha que sua descrição:

Visual em telas de até 342px de largura {w=40}

Passo a passo com código

  1. No arquivo sobre.css na pasta css faça as seguintes alterações:

    css/sobre.css
     body {
       width: 80%;
       max-width: 940px;
       margin-left: auto;
       margin-right: auto;
    
       font-size: 16px;
       line-height: 1.5;
       font-family: "Helvetica", "Lucida Grande", sans-serif;
       color: #3D3D3D;
     }
    
     .titulo {
       padding: 10px;
    
       font-size: 32px;
    
       background-color: #E1EDF2;
     }
    
     .subtitulo {
       border-bottom: 2px solid black;
     }
    
     figure {
       max-width: 100%;
       box-sizing: border-box;
       margin: 30px;
       padding: 15px;
    
       text-align: center;
    
       background-color: whitesmoke;
       border: 1px solid lightgrey;
     }
    
     figcaption {
       margin-top: 10px;
     }
    
     .matriz-musicdot {
       width: 550px;
       margin-left: auto;
       margin-right: auto;
     }
    
     .familia-tupfeln {
       width: 275px;
       float: right;
     }
    
     figure img {
       width: 100%;
     }
    
     .contato__subtitulo {
       display: inline;
     }
    
     .contato__secao {
       display: inline-block;
       vertical-align: top;
       margin-left: 16px;
     }
    
     .contato__secao--telefone {
       margin-left: 32px;
     }
    
     .contato__info {
       margin: 16px 0 24px;
       padding-left: 32px;
     }
    
     .contato__info-titulo,
     .contato__info-descricao {
       display: inline;
     }
    
     .contato__info-descricao {
       margin-left: 10px;
     }
    
     .rodape {
       padding: 1.75em 0;
    
       font-size: 1.1rem;
     }
    
     .rodape__logo {
       width: 6em;
     }
    
     .rodape__copyright {
       display: inline;
       margin-left: 1em;
     }
    +
    +@media (max-width: 850px) {
    +
    +  .contato__secao {
    +    display: block;
    +    margin-left: 1em;
    +  }
    +
    +}
    +
    +@media (max-width: 622px) {
    +
    +  .familia-tupfeln {
    +    float: none;
    +    margin: 0 auto;
    +  }
    +
    +}
    +
    +@media (max-width: 446px) {
    +
    +  .contato__subtitulo {
    +    display: block;
    +    margin-bottom: 0;
    +  }
    +
    +  .contato__info {
    +    padding-left: 5px;
    +    
    +    font-size: .92em;
    +
    +    border-left: 2px solid lightgray;
    +  }
    +
    +  .rodape {
    +    font-size: .92em;
    +  }
    +
    +}
    +
    +@media (max-width: 342px) {
    +
    +  .contato__info-descricao {
    +    display: block;
    +    margin-left: 1em;
    +  }
    +
    +}