I made a registration page, but in chrome it does not show the updated css of it, but by firefox it shows everything updated already. So I went up on the server to see for my cell phone, iphone 5s, and even then it does not work properly, I'm missing things that I moved through the css, and I uploaded EVERYTHING. And sometimes when I delete the chrome cache, the site gets updated with all the css I put in.
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*/