1
resposta

[Projeto] Desafio de Adaptação das Páginas Produtos e Contato

Olá, meus colegas devs.

Confesso que lutei um pouquinho, quebrei um pouco a cabeça por alguns instantes, mas acredito que consegui adaptar bem essas duas páginas. Vi a publicação de um camarada que a parte do formulário de contato ficava mais compacta e acabei alterando, mas no resto acredito que consegui fazer bem.

Qualquer sugestão/opinião para melhoria será muito bem-vinda!

Caso alguém deseje verificar como todas as páginas ficaram, vou deixar também o link do repositório no GitHub (que também tô aprendendo aos poucos haha).

https://github.com/samsilveira/introducao-html-alura

Desejo a todos ótimos estudos!

@media screen and (max-width: 480px) {
    .caixa, .principal, .conteudo-beneficios, .conteudo-mapa, .video, form {
        width: auto;
    }

    h1 {
        text-align: center;
    }

    nav {
        position: static;
    }

    .lista-beneficios, .imagem-beneficios {
        width: 100%;
    }

    .produtos {
        width: auto;
        text-align: center;
    }

    .produtos li {
        width: 80%;
        margin: 2em auto;
    }

    form {
        margin: 40px 5%;
        text-align: center;
    }

    .input-padrao {
        margin: 1em auto;
        width: 70%;
    }

    form label, form legend {
        margin: 0 0 10px;
    }

    .enviar {
        width: 70%;
        margin: 0 1.5%;
        padding: 15px 10px;
    }

    table {
        margin: 2em auto;
    }
}

Exibição do navegador no modo mobile com a página Produtos do projetoInsira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Olá, Samuel.

Tudo bem?

Muito obrigado por compartilhar o seu projeto aqui com a gente. Ficou muito bom mesmo, Parabéns! Para ficar melhor ainda, eu colocaria umas margens entre um input e outro, nos comuns e nos do tipo radio também, no caso estão um pouco colados. Fora isso tá show.

Valeu Samuel. Qualquer dúvida manda aqui.