Botão enviar centralizado | HTML5 e CSS3 parte 4: avançando no CSS

2
respostas

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Design responsivo e atividade Adaptar uma página para celular

por Barbara Costa Baron

| 49.2k xp | 16 posts

Fiz todas as modificações para o site ficar responsivo e a única coisa que não consegui mudar foi o botão de enviar da página de contato. Gostaria de centralizá-lo na página, até criei uma div para ver se conseguia através da margem mas não deu certo.

<div class="botao-enviar">
                    <input type="submit" value="Enviar formulário" class="enviar">
                </div>

.enviar {
    width:40%;
    padding: 15px 0;
    background: gold;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    transition: 1s all;
    cursor: pointer;
}

O que devo colocar no media query para ele ficar no centro?

2 respostas

por Laís Cavalcanti

| 2576.8k xp | 4815 posts

Instrutor

03/06/2020

Oi, Barbara, tudo bem?

Você poderia disponibilizar o seu css de @media da página de contato para testar e fazer alterações em cima dele?

por Barbara Costa Baron

| 49.2k xp | 16 posts

05/06/2020

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

    h1 {
        text-align: center;
    }

    nav {
        position: static;
    }

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

    .produtos li {
        display: block;
        width: auto;
    }

    label, legend, fieldset, .enviar {
        text-align: center;
    }

    .input-padrao {
        margin: 10px auto;
        width: 80%;
    }


    table {
        margin: 20px auto 40px;

    }

}