estoyEstoy haceiendo un sitio web tengo un problema con el footer. Sigo los pasos de bootstrap, pero tengo problemas con el responsive.
Aclaro que arriba del footer hay texto e imagenes y si hago esto:
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
el footer me queda en medio.
.footer {
background-image: url("https://i.sstatic.net/AZ2Xw.png");
background-position: center center;
background-repeat: no-repeat;
position: absolute;
margin-top: 580px;
width: 100%;
height: 300px; /* Set the fixed height of the footer here */
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="stn" >
<link rel="icon" href="favicon.ico">
<title>Electrocer San Telmo</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
<body>
<footer class="footer">
<div class="container text-white">
<br>
<div class="row">
<div class="col-md-4 col-lg-2">
<h4>Facebook</h4>
<p><i class="fab fa-facebook"></i> <a href="#">/usuario</a></p>
</div>
<div class="col-md-4 col-lg-4">
<h4 id="contacto">Contacto</h4>
<p>San Telmo</p>
<p>Dirección: CABA - Buenos Aires<br>
Teléfonos:<br>
eMail:</p>
</div>
<div class="col-md-4 col-lg-6">
<p>
Maoa
</p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</body>
</html>