0
How to solve the print problem? I’m developing a responsive registration page, only the logo and the title are giving me a lot of headache, I’ve tried everything I know and I couldn’t solve, it’s getting like this from about 500px. The problem lies in this transition of pixels.
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/cadastro.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<div id="header">
<div id="header-logo">
<h1>
<img id="logo" src="img/logo.png" alt="Logo da Realiza Digital">
</h1>
<h4>Social Network</h4>
</div>
<h1 id="titulo">Cadastro</h1>
</div>
<div id="content">
<form id="formulario">
<label for="nome" class="p48">
<span>Nome:</span>
<input type="text" name="nome" id="nome" placeholder="Digite aqui seu nome">
</label>
<label for="sbnome" class="p48">
<span>Sobrenome:</span>
<input type="text" name="sbnome" id="sbnome" placeholder="Digite aqui seu sobrenome">
</label>
<label for="email" class="p48">
<span>E-mail:</span>
<input type="email" name="email" id="email" placeholder="Digite aqui seu email">
</label>
<label for="idade" class="p23">
<span>Idade:</span>
<input type="number" name="idade" id="idade" placeholder="Digite aqui sua idade">
</label>
<label for="cpf" class="p23">
<span>CPF:</span>
<input type="number" name="cpf" id="cpf" placeholder="Digite aqui seu CPF">
</label>
<label for="cep" class="p23">
<span>CEP:</span>
<input type="number" name="cep" id="cep" placeholder="Digite aqui seu CEP">
</label>
<label for="endereco" class="p48">
<span>Endereço:</span>
<input type="text" name="endereco" id="endereco" placeholder="Digite aqui seu endereço">
</label>
<label for="senha" class="p23">
<span>Senha:</span>
<input type="password" name="senha" id="senha" placeholder="Digite aqui sua senha">
</label>
<input type="submit" name="enviar" id="enviar" value="ENVIAR">
</form>
</div>
<div id="footer">
<p>Projeto Realiza Digital © 2017</p>
</div>
</body>
</html>
CSS
body {
font-family: 'Open Sans', sans-serif;
box-sizing: border-box;
}
#header {
background-color: #e0e80d;
height: 170px;
}
#header-logo h1 {
position: absolute;
top: 20px;
left: 50px;
}
#header-logo h4 {
position: absolute;
top: 130px;
left: 50px;
text-transform: uppercase;
color: rgb(0, 54, 52);
font-weight: bold;
font-size: 17px;
}
#header a {
text-decoration: none;
color: rgb(0, 54, 52);
}
#titulo {
text-align: center;
font-weight: bold;
padding-top: 60px;
font-size: 40px;
}
#content {
max-width: 800px;
margin: 0 auto;
margin-top: 100px;
}
#formulario {
margin-top: 30px;
display: flex;
flex-wrap: wrap;
max-width: 800px;
height: 290px;
}
label {
margin-top: 30px;
}
label input {
width: 93%;
height: 30px;
padding: 10px;
border-style: none;
border-radius: 4px;
box-shadow: 0px 0.5px #888888;
background-color: #eee;
font-size: 15px;
}
input::placeholder {
color: rgb(170, 170, 170);
}
span {
display: block;
margin-bottom: 10px;
color: rgb(0, 54, 52);
font-weight: bold;
}
.p48 {
width: 49%;
margin-right: 1%;
}
.p23 {
width: 22%;
margin-right: 3%;
}
#enviar {
margin-top: 65px;
padding: 15px;
background-color: #b4bb07;
border-style: none;
border-radius: 4px;
width: 31%;
height: 60px;
color: white;
box-shadow: 1px 1px 1px #888888;
font-size: 20px;
cursor: pointer;
}
#footer {
background-color: #e0e80d;
margin-top: 300px;
padding: 40px 0px;
display: flex;
justify-content: center;
position: relative;
bottom: 0;
width: 100%;
}
#footer p {
font-weight: bold;
}
@media screen and (max-width: 380px) {
#header {
display: flex;
justify-content: center;
height: 260px;
}
#header-logo h1 {
left: 30%;
}
#header-logo h4 {
position: absolute;
top: 140px;
left: 25%;
text-transform: uppercase;
color: rgb(0, 54, 52);
font-weight: bold;
font-size: 17px;
}
#titulo {
font-weight: bold;
padding-top: 180px;
font-size: 40px;
}
#content {
max-width: 280px;
margin: 0px 4% 0px 4%;
}
label {
display: flex;
flex-wrap: wrap;
}
.p23 {
width: 95%;
margin-left: 5%;
margin-right: 0%;
}
.p48 {
width: 95%;
margin-left: 5%;
margin-right: 0%;
}
#enviar {
width: 84%;
margin: 0 auto;
margin-top: 80px;
}
#footer {
margin-top: 800px;
padding: 40px 0px;
}
You need the first image to be the same as the second image, that is, right above, title below and all centered?
– Luiz Augusto Neto