1
I made a registration page, but in Chrome does not show the updated css of it, but by firefox shows all updated already. Then I climbed on the server to see through my cell phone, iphone 5s, and even then it doesn’t work properly, it’s missing things that I’ve touched by css, and I went up EVERYTHING. And sometimes when I delete Chrome cache, the site is updated with all the css I’ve put.
Page:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- As 3 meta tags acima *devem* vir em primeiro lugar dentro do `head`; qualquer outro conteúdo deve vir *após* essas tags -->
<title>Lojas Guido | Portal do Cliente - Cadastro</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="all">
<link rel="icon" href="img/icon/guido.ico" type="image/x-icon">
<link href="css/style.css" rel="stylesheet" media="all">
<link rel="stylesheet" href="css/footer.css">
<link rel="stylesheet" href="css/footerIndex/Media_Query_FooterCadastro.css">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="header">
<div id="retngulo-3-cad"></div>
<div id="forma-1"></div>
</div>
<br>
<h1 class="portal portal_cadastro"><span class="degrade">Portal guido</span></h1>
<!-- CADASTRO -->
<div class="container">
<div class="row-fluid">
<div class="col-xs-12 col-lg-12">
<div class="form-cadastro">
<h2 class="degrade">cadastro</h2>
<br>
<?php
include "config/processa.php";
?>
<form method="POST">
<label class="cor">CPF*:</label>
<span>Apenas números</span>
<input type="text" id="cpf" name="cpf" title="Digite apenas números" class="form-control input-lg" placeholder="00000000000" maxlength="11" required /><span id="resposta"></span>
<br>
<label inputemail>E-mail*:</label>
<input type="email" id="email" name="email" class="form-control input-lg email" placeholder="[email protected]" maxlength="50" required />
<br>
<button type="submit" class="btn btn-primary btn-lg btn-block" id="cadastrar" name="cadastrar" disbled/ >
<span class="glyphicon glyphicon-ok"></span>
<span id="cpf"></span>Cadastrar</button>
<br>
<span>Já possui cadastro?</span> <a href="index.php" class="cadastro">Login</a>
<ul id="page-bar">
<br>
<li><a href="#" target="_blank">Lojas Guido</a></li>
<li><a href="#" class="faceb" target="_blank">Facebook</a></li>
<li><a href="#" class="mapa" target="_blank">Mapa</a></li>
</ul>
</form>
</div>
</div>
</div>
</div>
<!-- FIM CADASTRO -->
<!-- RODAPÉ -->
<div class="div-2"></div>
<br>
<div class="footer_complete">
<div class="bt-1 py-4 text-center text-md-left bg-inverse">
<div class="container">
<div class="row">
<div class="col-md-12 ">
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-4">
<h3 class="mb-1 text-white m-0 display-3">Informações</h3>
<ul class="list-unstyled text-white mb">
<li>
<a href="#" class="link-1" >Termos de Uso</a>
</li>
<li>
<a href="#" class="link-1">Ofertas</a>
</li>
<li>
<a href="#" class="link-1">Como Funciona</a>
</li>
</ul>
</div>
<!---->
<!---->
<div class="col-md-4 col-lg-4 col-sm-4">
<h3 class="mb-1 text-white m-0 display-3">Contate-nos</h3>
<ul class="list-unstyled text-white">
<li class="text-warning">[email protected]</li>
<li class="text-warning"> (82) 3217-6300 </li>
<li class="text-warning"> Esc. Central: Rua do Comércio, 155,</li>
<li class="text-warning">Centro - Maceió - Alagoas</li>
</ul>
</div>
<!---->
<div class="col-md-4 col-lg-4 col-sm-4">
<h3 class="mb-1 text-white m-0 display-3">Redes Sociais</h3>
<ul class="list-unstyled text-white">
<li>
<a href="https://www.facebook.com/lojasguido" class="link-1" target="_blank">Facebook</a>
</li>
<li>
<a href="http://www.twitter.com/lojasguido" class="link-1" target="_blank">Twitter</a>
</li>
<li>
<a href="https://www.youtube.com/user/lojasguido" class="link-1" target="_blank">Youtube</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--Copyright-->
<div class="row text-white">
<div class="col-md-12 col-lg-12 col-sm-12 text-right copyright">
<p class="mt-1">Todos os direitos reservados. |
© 2018 Loja.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
#forma-1 {
position: absolute;
top: 0.5px;
left: 0%;
width: 100%;
height: 1px ;
z-index: 880;
background-color: #326895;
right: 0%;
margin: auto;
}
#retngulo-3 {
position: absolute;
top: 0px;
left: -580px;
width: 149px;
height: 3.5px;
z-index: 890;
background-color: #3293b7;
right: 484.3px;
margin: auto;
}
#retngulo-3-cad{
position: absolute;
top: 0px;
left: 500px;
width: 149px;
height: 3.5px;
z-index: 890;
background-color: #3293b7;
right: 484.3px;
margin: auto;
}
#header {
position: absolute;
top: 30px;
left: 0%;
width: 100%;
height: 59px;
z-index: 870;
right: 0%;
margin: auto;
}
.cadastro{
font-size: 18px;
color: #bac7d3;
/* text-decoration:underline; */
}
.cadastro:hover,
.cadastro:focus{
color: #a1a7ad;
}
#page-bar {
/* margin: 0px;
padding: 0px; */
width:400px;
}
#page-bar ul {
/* width: 200%; */
}
#page-bar li {
float:left;
display:block;
list-style-position: inside;
list-style-image: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
#page-bar li a{
color: #bac7d3;
display:block;
width: 87px;
text-align: center;
position: relative;
right: 28px;
font-size: 15px;
padding-top: 5px;
padding-bottom: 5px;
}
#page-bar li a:hover,
#page-bar li a:focus{
color: #a1a7ad;
}
.faceb{
position: relative;
left: -18px;
}
.citacao-bio {
/* background-color: #D9E5E3;
border: .5em solid #C2CCCA; */
padding: 1em;
margin: 1em 2em;
width: 50ch;
box-sizing: border-box;
transition: box-shadow 1s, transform 1s;
transition-delay: 1s, 0s;
}
.degrade{
font-weight: bold;
text-transform:uppercase;
background: -webkit-linear-gradient(#696969, #000000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.portal_cadastro{
text-align: center;
}
.logo{
float: right;
text-transform: uppercase;
font-weight: bold;
background: -webkit-linear-gradient(#3293b7, #3293b7, #326895, #326895);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.div-1{
padding: 200px;
}
.div-2{
padding: 100px;
}
/*IPHONE 5 */
@media only screen
and (device-width : 320px)
and (device-height : 568px){
#retngulo-3-cad{
left: 86px;
}
#page-bar li a{
right: 60px;
}
.faceb{
position: relative;
left: -55px;
}
#page-bar{
width: 130%;
}
.mapa{
position: relative;
left: 120%;
bottom: 31px;
}
.mt-1{
position: relative;
left: 1.2em;
top: 1em;
text-align: center;
width: 87%;
}
}
/*FIM IPHONE 5 */
/*IPHONE 4 */
@media only screen
and (device-width : 320px)
and (device-height : 480px){
#retngulo-3-cad{
left: 86px;
}
#page-bar li a{
right: 60px;
}
.faceb{
position: relative;
left: -55px;
}
#page-bar{
width: 130%;
}
.mapa{
position: relative;
left: 120%;
bottom: 31px;
}
.mt-1{
position: relative;
left: 1.2em;
top: 1em;
text-align: center;
width: 87%;
}
}
/*FIM IPHONE 4 */
/*IPHONE 6 */
@media only screen
and (device-width : 375px)
and (device-height : 667px){
#retngulo-3-cad{
left: 115px;
}
#page-bar li a{
right: 45px;
}
.faceb{
position: relative;
left: -32px;
}
#page-bar{
width: 125%;
}
.mapa{
position: relative;
left: -2.5em;
}
.mt-1{
position: relative;
left: 3em;
top: 1em;
text-align: center;
width: 72%;
}
}
/*FIM IPHONE 6 */
/*IPHONE 6s plus */
@media only screen
and (device-width : 414px)
and (device-height : 736px){
#retngulo-3-cad{
left: 135px;
}
#page-bar li a{
right: 30px;
}
.faceb{
position: relative;
left: -16px;
}
#page-bar{
width: 120%;
}
.mapa{
position: relative;
left: -1em;
}
.mt-1{
position: relative;
left: 5em;
top: 1em;
text-align: center;
width: 60%;
}
}
/*FIM IPHONE 6s plus */
/*GOOGLE NEXUS 4 */
@media only screen
and (device-width : 384px)
and (device-height : 640px){
#retngulo-3-cad{
left: 135px;
}
#page-bar li a{
right: 50px;
}
.faceb{
position: relative;
left: -27px;
}
#page-bar{
width: 120%;
}
.mapa{
position: relative;
left: -1em;
}
.mt-1{
position: relative;
left: 3.5em;
top: 1em;
text-align: center;
width: 70%;
}
}
/*FIM GOOGLE NEXUS 4 */
/*GOOGLE NEXUS 5 */
@media only screen
and (device-width : 360px)
and (device-height : 640px){
#retngulo-3-cad{
left: 8em;
}
#page-bar li a{
right: 50px;
}
.faceb{
position: relative;
left: -38px;
}
#page-bar{
width: 120%;
}
.mapa{
position: relative;
left: 9em;
bottom: 2.02em;
}
.mt-1{
position: relative;
left: 3.5em;
top: 1em;
text-align: center;
width: 71%;
}
}
/*FIM GOOGLE NEXUS 5 */
/*GOOGLE NEXUS 6 */
@media only screen
and (device-width : 412px)
and (device-height : 732px){
#retngulo-3-cad{
left: 10em;
}
#page-bar li a{
right: 50px;
}
.faceb{
position: relative;
left: -1em;
}
#page-bar{
width: 120%;
}
.mapa{
position: relative;
left: 0em;
bottom: 0em;
}
.mt-1{
position: relative;
left: 4.5em;
top: 1em;
text-align: center;
width: 64%;
}
}
/*FIM GOOGLE NEXUS 6 */
/*GOOGLE NEXUS 7 */
@media only screen
and (device-width : 960px)
and (device-height : 600px){
#retngulo-3-cad{
left: 29em;
}
#page-bar li a{
right: 39px;
}
.faceb{
position: relative;
left: -1em;
}
#page-bar{
width: 120%;
}
.mapa{
position: relative;
left: 0em;
bottom: 0em;
}
.mt-1{
position: relative;
left: 7em;
}
}
/*FIM GOOGLE NEXUS 7 */
/*MOTOROLA MOTO 360 */
@media only screen
and (device-width : 320px)
and (device-height : 290px){
#retngulo-3-cad{
left: 6em;
}
#page-bar li a{
right: 4em;
}
.faceb{
position: relative;
left: -3.7em;
}
#page-bar{
width: 120%;
}
.mapa{
position: relative;
left: 7em;
bottom: 2.08em;
}
.mt-1{
position: relative;
left: 2em;
width: 85%;
text-align: center;
}
}
/*FIM MOTOROLA MOTO 360 */
/*IPAD AIR 2*/
@media only screen
and (device-width : 1024px)
and (device-height : 768px){
#retngulo-3-cad{
left: 32em;
}
#page-bar li a{
right: 2em;
}
.faceb{
position: relative;
left: -1em;
}
#page-bar{
width: 120%;
}
.mapa{
position: relative;
left: -1em;
bottom: 0em;
}
.mt-1{
position: relative;
width: 100%;
}
}
/*FIM IPAD AIR 2*/
Marina even though it’s great put your entire HTML! And CSS too!! Without that it is unlikely that we can fake your mistake and give you an answer.
– hugocsl
@hugocsl Ready. I put all html and all css
– Maria
Cade the
<head>of your page? It starts directly from<body>??– hugocsl
She has the <head> but I did not put pq I found unnecessary, but in case I need
– Maria
Let me explain to you why I asked
<head>It is usually in it that we include the style sheets, Bootstrap Cdns etc, and there usually give some indexing errors, etc. Now with the complete code and knowing what you indexed in the page is better to give you a response.– hugocsl
Ah, yes. I’ve put it all in now then
– Maria