Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Width 50% reduziu o input

Fala, pessoal, quando coloquei width: 50%, em vez de ocupar metade da tela, ele reduziu meus input, tive que escrever 220% pra ficar, mais ou menos, igual ao do vídeo. Achei um outro tópico com a mesma dúvida mas não resolveu a minha.

CSS da parte do formulário:

main {
    width: 940px;
    margin: 0 auto;
}

form {
    margin: 40px 0;
    display: inline-block;
}

form label {
    display: block;
    font-size: 20px;
    margin: 0 0 10px;

}

form input {
    display: block;
    margin: 0 0 20px;
    padding: 10px 25px;
    width: 50%;
}

HTML dos formulários:

<main>
            <form>
                <label for="nomesobrenome">Nome e sobrenome</label>
                <input type="text" id="nomesobrenome">

                <label for="email">E-mail</label>
                <input type="text" id="email">

                <label for="telefone">Telefone</label>
                <input type="text" id="telefone">

                <input type="submit" value="Enviar formulário">
            </form>

        </main>

Valeu!

2 respostas
solução!

Olá Giovani, tudo bem com você?

Isso aconteceu porque você acabou adicionando uma propriedade a mais no seu formulário, veja:

form {
    margin: 40px 0;
    display: inline-block;
}

Quando você definiu o display: inline-block, você estava dizendo que era para o formulário ocupar apenas o tamanho do seu conteúdo, e por conta disso os inputs ficaram ainda menores, porque começaram a ocupar 50% do conteúdo de algo já reduzido, compreende?

Para corrigir isso basta tirar o display: inline-block; que seu código já estará com o design correto!

Abraços e Bons Estudos!

Opa, é verdade, hehe

Já alterei aqui, muito obrigado!!