Estoy intentando hace horas que el footer me quede fijo abajo sin importar el tamaño de la pantalla. En tamaño de pantalla normal(pc) me aparece perfectamente abajo pero cuando lo achico a tamaño celular se va hacia el medio de la pantalla. Ya probé con position y con otras soluciones que busqué pero no logro solucionarlo. No entiendo que estoy haciendo mal, me ayudaría mucho que alguien me marque el error. ¡Desde ya muchas gracias!
Este es mi código
.headercont {
width: 100%;
background-color:rgb(198, 224, 183) ;
height: 220px;
position: relative;
}
header {
width: 100%;
background-color:rgb(198, 224, 183) ;
position: fixed;
z-index: 100;
}
header ul {
margin-top: 10px;
}
header img {
height: 120px;
width: 120px;
border-radius: 30px;
}
.buscador {
border: grey;
border-radius: 40px;
background-color: ivory;
float: right;
padding: 0px 60px;
margin: 50px 50px 0px 0px;
}
.menu-principal {
text-align:center;
padding-top: 20px;
margin: auto;
}
body {
margin: 0px 0px;
}
.contenedor-logo {
text-align:center;
padding-top: 20px;
margin-left: 120px;
}
.menu-principal ul li {
padding: 6px 100px 6px 100px ;
margin: 6px;
display: inline;
justify-content: center;
align-items: center;
border: 2px solid cadetblue;
}
.menu-principal ul li:hover {
background-color: rgb(84, 117, 119);
}
.menu-principal ul li:hover a {
color: white;
text-shadow: 3px 3 px 4px black;
}
ul li a {
text-decoration:none;
text-align: center;
color: rgb(49, 49, 49);
}
#lightSlider li img {
width: 100%;
margin-top: 10px;
}
.contenido {
display: flex; /*contenedor flex*/
flex-direction:row ;
align-items: center ;
flex-wrap: wrap;
height: 400px;
}
.contenido div /*item flex*/
{
width: 33%;
}
.contenido img /*item flex*/ {
height: 400px;
margin: 10px 10px;
border-radius: 30px;
overflow: hidden;
opacity: 80%;
}
.peques img {
height: 300px;
margin-bottom: 60px;
}
footer {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 90px;
width: 100%;
background-color:rgb(198, 224, 183) ;
}
footer img {
height: 30px;
width: 30px;
padding: 10px;
}
div button {
margin: 20px;
background-color: rgb(158, 197, 155);
padding:10px 60px ;
border: none;
position: relative;
left: 50%;
color: white;
font-size: 17px;
font-weight: bolder;
text-transform: uppercase;
cursor: pointer;
transition: all 0.25s linear;
}
div button:hover {
color: grey;
background-color: white;
box-shadow: 3px 3px 4px black;
text-shadow: 3px 3 px 4px black;}
@media (max-width: 1350px){
.menu-principal ul li {
display:flex;
flex-direction: column;
}
}
@media (max-width: 1350px) {
.contenido div {
display: flex;
flex-direction: column;
width: 100%;
padding: 30px;
margin: 0px 20px;
}
}
<!DOCTYPE html>
<html>
<head>
<title>
Mates personalizados
</title>
<link rel="stylesheet" href="CSS/style.css">
<link type="text/css" rel="stylesheet" href="css/lightslider.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="js/lightslider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#lightSlider').lightSlider({
adaptiveHeight:true,
item:1,
slideMargin:0,
loop:true
});
});
</script>
</head>
<body>
<div class="headercont">
<header>
<div class="buscador">
<p>buscar</p>
</div>
<div class="contenedor-logo">
<img src="images/logomate.jpg" alt="logo mate">
</div>
<div class="menu-principal">
<ul>
<li>
<a href="index.html">INICIO</a>
</li>
<li>
<a href="productos.html">PRODUCTOS</a>
</li>
<li>
<a href="nosotros.html">NOSOTROS</a>
</li>
<li>
<a href="personaliza.html">PERSONALIZÁ TU MATE</a>
</li>
</ul>
</div>
</header>
</div>
<div class="poster">
<ul id="lightSlider">
<li>
<img src="images/backk cop.jpg" alt="mates 1"></li>
<li>
<img src="images/slider 1.jpg" alt="mates 2"></li>
<li>
<img src="images/slider 2.jpg" alt="mates 3"></li>
<li>
<img src="images/slider 3.jpg" alt="mates 4"></li>
<li>
<img src="images/slider 4.jpg" alt="mates 5"></li>
</ul>
</div>
<div class="contenido">
<div>
<img src="images/conjunto.jpg" alt="conjunto">
</div>
<div class="peques">
<img src="images/MATE 3.jpg" alt="mate">
</div>
<div class="peques">
<img src="images/TERMO Y MATE.jpg" alt="TERMO">
</div>
</div>
<div>
<button>
<p>Personalizá tu mate!</p>
</button>
</div>
<footer>
<img src="images/ig.png" alt="instagram">
<img src="images/face.png" alt="facebook">
</footer>
</body>
</html>