Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Meu formulário voltou ao tamanho menor...

Referente ao curso HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas, no capítulo Melhorando a semântica e atividade Formulários mais fáceis de serem preenchidos

por ROGERS CALAZANS TRIUMPHO
| 93.4k xp | 115 posts
insira seu código aqui

`

header {
    background:#BBBBBB;
    padding:20px 0;
}

.caixa {
    position:relative;
    width:940px;
    margin:0 auto;
}

nav {
    position:absolute;
    top:110px;
    right:0;
}

nav li {
    display:inline;
    margin:0 0 0 15px;
}

nav a {
    text-transform:uppercase;
    color: #000000
    font-weight:bold;
    font-size:22px;

}

nav a:hover{

   color:#C78C19;
   text-decoration:underline; 
}

.produtos li:hover{

border-color: #C78C19;


}

.produtos li:active{

border-color: #088C19;




}

.produtos li:hover h2{

    font-size: 34px;
}

.produtos {

    width:940px;
    margin:0 auto;

}

.produtos li{

    display:inline-block;
    text-align:center;
    width:30%;
    vertical-align:top;
    margin:01.5%;
    padding:30px 20px;
    box-sizing:border-box;
    border:2px solid #000000;
    border-radius:10px 10px 10px 10px;
}

.produtos h2{

    font-size:30px;
    font-weight:bold;


}
.produto_preco {

    font-size:30px;
    font-weight:bold;
    margin-top:10px;
}

.produto_descricao{

    font-size:18px;
    font-weight:bold; 
}

footer {

    text-align: center;
    background: url("bg.jpg");
    padding:40px 0;
}

.copyright{
    color:#FFFFFF;
    font-size: 13px;
    margin: 20px 0; 
}

main{

    width: 940px
    margin:0 auto;
}

form{

    margin:40px;
}
form label, form p{
    display: block;
    font-size: 20px;
    margin: 0 0 10px;
}

.input-padrao{

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

    margin: 20px 0;
}
8 respostas
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Rogers!

Qualquer dúvida é só falar :} Bons estudos!

por ROGERS CALAZANS TRIUMPHO
| 93.4k xp | 115 posts
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
           <title>Contato-Barbearia Alura</title>
           <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
    </head>


    <body>
        <header>
            <div class= "caixa">
                <h1><img src= "logo.png"></h1>
                <nav>
                    <ul>
                        <li><a href= "index.html">Home</a></li>
                        <li><a href="produtos.html">Produtos</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <main>
            <form>
                <label for="nomesobrenome"class="input-padrao"> Nome e sobrenome</label>
                <input type ="text" id="nomesobrenome">

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

                <label for="e-mail"class="input-padrao"> E-mail</label>
                <input type="text" id="e-mail">

                <input type="submit"value=" Enviar formulario">
                <label for ="mensagem"> Mensagem</label>

                <textarea cols="70"rows ="10"></textarea>

                <div>
                    <p>Como prefere o nosso contato?</p>
                    <label for="radio-email"><input type="radio"name="contato" value="email" id="radio-email">Email</label>


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


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

                </div>

                <div><p>Qual horário prefere ser atendido</p>
                    <select>

                        <option>Manhã</option>
                        <option>Tarde</option>
                        <option>Noite</option>
                    </select>
                </div>


                    <label><input class="checkbox" type="checkbox">Gostaria de receber novidades por Email?</label>
                    <input type="submit" value="Enviar formulário">

            </form>
        </main>

        <footer>
            <img src="logo-branco.png">

            <p class = "copyright">&copy; Copyright Barbearia Alura - 2020</p>
        </footer>
    </body>    
</html>
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Rogers! Anteriormente você havia colocado uma mensagem com o texto "Sorry", certo?

Mas acredito que você agora precise de ajuda.

Eu identifiquei uns detalhes nos css que podem estar ocasionando isso, que são algumas ausências de ;. Se alguma propriedade fica sem o ; ao final da declaração, a propriedade seguinte não funciona. Segue os ajustem necessários:

Na propriedade color, falta um ;

nav a {
  text-transform: uppercase;
  color: #000000
  font-weight: bold;
  font-size: 22px;
}

E na propriedade width falta também o ;


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

Testa as correções e se o problema de tamanho é solucionado :}

por ROGERS CALAZANS TRIUMPHO
| 93.4k xp | 115 posts

mas corrigi e não funcionou ainda... 

header {
    background:#BBBBBB;
    padding:20px 0;
}

.caixa {
    position:relative;
    width:940px;
    margin:0 auto;
}

nav {
    position:absolute;
    top:110px;
    right:0;
}

nav li {
    display:inline;
    margin:0 0 0 15px;
}

nav a{ 
    text-transform:uppercase;
    color: #000000;
    font-weight:bold;
    font-size:22px;
}

nav a:hover{

   color:#C78C19;
   text-decoration:underline; 
}

.produtos li:hover{

border-color: #C78C19;


}

.produtos li:active{

border-color: #088C19;




}

.produtos li:hover h2{

    font-size: 34px;
}

.produtos {

    width:940px;
    margin:0 auto;

}

.produtos li{

    display:inline-block;
    text-align:center;
    width:30%;
    vertical-align:top;
    margin:01.5%;
    padding:30px 20px;
    box-sizing:border-box;
    border:2px solid #000000;
    border-radius:10px 10px 10px 10px;
}

.produtos h2{

    font-size:30px;
    font-weight:bold;


}
.produto_preco {

    font-size:30px;
    font-weight:bold;
    margin-top:10px;
}

.produto_descricao{

    font-size:18px;
    font-weight:bold; 
}

footer {

    text-align: center;
    background: url("bg.jpg");
    padding:40px 0;
}

.copyright{
    color:#FFFFFF;
    font-size: 13px;
    margin: 20px 0; 
}

main{

    width: 940px;
    margin:0 auto;
}

form{

margin:40px;

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

.input-padrao{

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

    margin: 20px 0;
}
por ROGERS CALAZANS TRIUMPHO
| 93.4k xp | 115 posts

Continua curto o meu input, será que meu css tem algo errado?` header { background:#BBBBBB; padding:20px 0; }

.caixa { position:relative; width:940px; margin:0 auto; }

nav { position:absolute; top:110px; right:0; }

nav li { display:inline; margin:0 0 0 15px; }

nav a{ text-transform:uppercase; color: #000000; font-weight:bold; font-size:22px; }

nav a:hover{

color:#C78C19; text-decoration:underline; }

.produtos li:hover{

border-color: #C78C19;

}

.produtos li:active{

border-color: #088C19;

}

.produtos li:hover h2{

font-size: 34px;

}

.produtos {

width:940px;
margin:0 auto;

}

.produtos li{

display:inline-block;
text-align:center;
width:30%;
vertical-align:top;
margin:01.5%;
padding:30px 20px;
box-sizing:border-box;
border:2px solid #000000;
border-radius:10px 10px 10px 10px;

}

.produtos h2{

font-size:30px;
font-weight:bold;

} .produto_preco {

font-size:30px;
font-weight:bold;
margin-top:10px;

}

.produto_descricao{

font-size:18px;
font-weight:bold;

}

.copyright{ color:#FFFFFF; font-size: 13px; margin: 20px 0; }

main{

width: 940px;
margin:0 auto;

}

form{

margin:40px;

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

.input-padrao{

display: block;
margin: 0 0 20px;
padding: 10px 25px;
width: 50%;

} .checkbox{

margin: 20px 0;

}

footer {

text-align: center;
background: url("bg.jpg");
padding:40px 0;

} `

solução!
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Rogers, tudo bem?

Você verificou se a .input-padrao que está no css foi declarada corretamente no contato.html?

O código que tenho, que testei é esse e que funcionou corretamente:

header {
  background: #bbbbbb;
  padding: 20px 0;
}

.caixa {
  position: relative;
  width: 940px;
  margin: 0 auto;
}

nav {
  position: absolute;
  top: 110px;
  right: 0;
}

nav li {
  display: inline;
  margin: 0 0 0 15px;
}

nav a {
  text-transform: uppercase;
  color: #000000;
  font-weight: bold;
  font-size: 22px;
  text-decoration: none;
}

nav a:hover {
  color: #c78c19;
  text-decoration: underline;
}

.produtos {
  width: 940px;
  margin: 0 auto;
  padding: 50px 0;
}

.produtos li {
  display: inline-block;
  text-align: center;
  width: 30%;
  vertical-align: top;
  margin: 0 1.5%;
  padding: 30px 20px;
  box-sizing: border-box;
  border: 2px solid #000000;
  border-radius: 10px;
}

.produtos li:hover {
  border-color: #c78c19;
}

.produtos li:active {
  border-color: #088c19;
}

.produtos li:hover h2 {
  font-size: 34px;
}

.produtos h2 {
  font-size: 30px;
  font-weight: bold;
}

.produto-descricao {
  font-size: 18px;
}

.produto-preco {
  font-size: 22px;
  font-weight: bold;
  margin-top: 10px;
}

footer {
  text-align: center;
  background: url("bg.jpg");
  padding: 40px 0;
}

.copyright {
  color: #ffffff;
  font-size: 13px;
  margin: 20px 0 0;
}

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

form {
  margin: 40px 0;
}

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

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

.checkbox {
  margin: 20px 0;
}

E como está o trecho dos inputs no html:

<label for="nomesobrenome">Nome e sobrenome</label>
                <input type="text" id="nomesobrenome" class="input-padrao" required>

                <label for="email">Email</label>
                <input type="email" id="email" class="input-padrao" required placeholder="seuemail@dominio.com">

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

                <label for="mensagem">Mensagem</label>
                <textarea cols="70" rows="10" id="mensagem" class="input-padrao" required></textarea>

Testa novamente e me fala se deu certo :}

por ROGERS CALAZANS TRIUMPHO
| 93.4k xp | 115 posts

Deu certo insira seu código aqui


Obrigado Lays! 
Fiz as alterações no meu código, css e contato.html e deu certo, tinha bastante coisa invertida no meu, mas agora foi rs
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Rogers, precisando de ajuda é só falar!