Footer seems to be misbehaving by not staying at the bottom and instead showing under the items rendered using v-for. This issue is only happening on this page while it is working fine on others.
<template>
<div>
<!-- Item rendering -->
<div class="main-div2">
<div
class="div3"
v-for="(product, index) in $store.getters.getProducts"
:key="index"
>
<img class="img-style" :src="product.image" />
<p>{{ product.discription }}</p>
<h4>Price: {{ product.price }}</h4>
</div>
</div>
<TheFooter />
</div>
</template>
These are the CSS classes for that component
.main-div2 {
display: flex;
flex-wrap: wrap;
height: 20vh;
justify-content: center;
z-index: 1;
/* grid-template-columns: repeat(auto-fit,minmax(50px,1fr));
grid-template-areas:
"div2 div3 div4 div5 div6"; */
}
.div3 {
flex: 1 1 250px;
position: relative;
height: 350px;
}
As for the footer's main div class
.wrapper {
height: 350px;
background: rgb(219, 210, 210);
margin-top: 7rem;
width: 100%;
bottom:0;
position:absolute;
}