Oi galera da Alura! Tudo bem? Não estou conseguindo criar margem nesse formulário, quando fui fazer o responsivo... Alguém poderia me ajudar?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Oi galera da Alura! Tudo bem? Não estou conseguindo criar margem nesse formulário, quando fui fazer o responsivo... Alguém poderia me ajudar?
Oi Ramiro,
O que você gostaria de fazer no formulário, centralizar?
Se possível, posta seu código pra gente dar uma olhada.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UFT-8">
<meta name="viewport" content="width=device-width">
<title>Contato - Barbearia Alura</title>
<link rel = "stylesheet" href = "reset.css">
<link rel = "stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class = "caixa">
<h1><img src = "logo.png" alt = "Logo Barbearia Alura"></h1>
<nav>
<ul>
<li><a href= "index.html">Home</a></li>
<li><a href="produtos.html">Produto</a></li>
<li><a href = "Contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>
<main>
<form>
<div class = "questionairio">
<label for = "NomeeSobrenome">Nome e Sobrenome</label>
<input type = "text" id = "NomeeSobrenome" class = "input-padrao" required>
</div>
<div class = "questionairio">
<label for = "Email">E-mail</label>
<input type = "email" id = "Email" class = "input-padrao" required
placeholder="seuemail@dominio.com">
</div>
<div class = "questionairio">
<label for = "Telefone">Telefone</label>
<input type = "tel" id = "Telefone" class = "input-padrao" required
placeholder="(XX) XXXXX-XXXX">
</div>
<div class = "questionairio">
<label for = "area-texto">Mensagem</label>
<textarea rows="10" id="area-texto" class = "input-padrao" required></textarea>
</div>
<fieldset clas = "radio-contato">
<legend>Como prefere nosso contato?</legend>
<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"
checked>Whatsapp</label>
</fieldset>
<fieldset>
<legend>Qual horário você prefere ser atendido?</legend>
<select>
<option>Manhã</option>
<option>Tarde</option>
<option>Noite</option>
</select>
</fieldset>
<label class = "checkbox"><input type = "checkbox" checked>Você gostaria de receber E-mails com novidades?</label>
<input class = "enviar" type = "submit" value = "Enviar Formulário">
<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>
</form>
</main>
<footer>
<img src ="logo-branco.png" alt = "Logo Barbearia Alura">
<p class = "copyright">© Copyright Barbearia Alura – 2019</p>
</footer>
</body>
</html>@media screen and (max-width: 480px) {
.caixa, .principal, .conteudo-beneficios, .mapa-conteudo, .video, .produtos, form {
width: auto;
}
h1{
text-align: center;
}
nav{
position: static;
display: block;
margin: 0 auto;
}
.lista-beneficios, .imgbeneficios{
width: 100%;
}
.produtos li{
width: 90%;
margin: 10% auto;
display: block;
}
.questionario{
width: 80%;
display: block;
margin: 40px;
}
.questionario label{
margin: 10px;
}
}
Aparentemente o único erro que percebi foi as letras trocadas, questionario e questionairio.
No HTML está assim:
<div class = "questionairio">
<label for = "Telefone">Telefone</label>
<input type = "tel" id = "Telefone" class = "input-padrao" required
placeholder="(XX) XXXXX-XXXX">
</div>E no CSS está assim:
.questionario label{
margin: 10px;
}