1
resposta

Página de contatos não está responsiva

Olá, pessoal. Não estou conseguindo deixar a página de contato responsiva, tentei várias mudanças mas não consegui resolver. A página inicial e a de produtos está funcionando perfeitamente, só a de contato que não funciona. Vou mandar meu código pra vocês analisarem:

CSS

@media screen and (max-width: 480px) {
    .cabecalho, .principal, .conteudo-beneficios, .mapa-conteudo, .video, .produtos, .form-contato, .input-padrao, .tabela {
        width: auto;
    } 

    h1 {
        text-align: center;
    }

    nav {
        position: static;
        text-align: center;
    }

    .principal p {
        margin-left: 5px;
        margin-right: 10px;
    }

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

    .itens {
        margin-left: 1em;
    }

    .itens:last-child {
        margin-bottom: 1em;
    }

    .produtos li {
        margin-bottom: 20px;
        display: block;
    }


    .form-contato, .produtos li {
        width: auto;
        padding: 1em;
    }

}

pra caber aqui, vou colocar só o head e o main da página de contato HTML - head

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

    <title>Contato - Barbearia Alura</title>
</head>

HTML - main

<main>
        <section class="form-contato">
            <form action="" class="form-control">  
                <label for="nome" id="nome">Nome Completo:</label>
                <input type="text" id="nome" class="input-padrao" required>

                <label for="email" id="email">E-mail:</label>
                <input type="email" id="email" class="input-padrao" placeholder="email@dominio.com.br" required>

                <label for="telefone" id="telefone">Telefone:</label>
                <input type="tel" id="telefone" placeholder="(XX) XXXXX-XXXX" class="input-padrao" required>

                <label for="mensagem" id="mensagem">Mensagem:</label>
                <textarea name="mensagem" id="mensagem" rows="5" placeholder="Digite sua mensagem aqui..." required></textarea>

                <fieldset class="preferencia-contato">
                    <legend>Como prefere receber o nosso contato?</legend>
                    <label for="radio-email"> <input type="radio" name="contato" id="radio-email" value="email"> E-mail</label>

                    <label for="radio-whatsapp"> <input type="radio" name="contato" id="radio-whatsapp" value="whatsapp" checked> WhatsApp</label>

                    <label for="radio-telefone"> <input type="radio" name="contato" id="radio-telefone" value="telefone"> Telefone</label> 
                </fieldset>

                <fieldset id="contato">
                    <legend>Qual horário prefere ser atendido?</legend>
                    <select name="hora-atendimento" id="hora-atendimento">
                        <option value="manha">Manhã</option>
                        <option value="tarde">Tarde</option>
                        <option value="noite">Noite</option>
                    </select>
                </fieldset>


                <label for="newsletter"><input type="checkbox" name="newsletter" id="newsletter" class="input-checkbox" checked> Gostaria de receber nossas novidades por e-mail?</label>    


                <input type="submit" class="btn-enviar" value="Enviar Formulário">
            </form>   
        </section>

        <section class="tabela">
            <table>
                <thead>
                    <tr>
                        <th>Dia</th>
                        <th>Horário</th>
                    </tr>
                </thead>   
                <tbody>
                    <tr>
                        <td>Segunda</td>
                        <td>08h ~ 20h</td>
                    </tr>
                    <tr>
                        <td>Quarta</td>
                        <td>08h ~ 20h</td>
                    </tr>
                    <tr>
                        <td>Sexta</td>
                        <td>08h ~ 20h</td>
                    </tr>
                </tbody> 

            </table>
        </section>  
    </main>

O que estou fazendo de errado?

1 resposta

Oi João, copiei teu código no code pen, não sei muito bem como tu imagina a pagina, mas pelo menos no código que tu enviou um bom começo seria usar flex-box. Copia esse código no teu CSS acho que já é um bom começo .form-control{ display: flex; flex-direction: column; align-itens: center; justify-content: center; }