I have seen a lot of articles and posts on how to achieve this but none of them are working for me.
What I want is for my footer to stay at the bottom of the page when viewing on mobile. It's fine on larger screens. On a mobile, unless position fixed is applied, it will place itself in the middle of Component.js.
I have tried a lot of different things and I'm struggling to get it to stick. Please view the code below
index.css
body {
position: relative;
margin: 0;
min-height: 100vh;
height: 100%;
width: 100%;
overflow: auto;
}
Footer
<div className='md:relative lg:relative grid grid-rows-1 md:grid-rows-1 lg:grid-rows-1
inset-x-0 md:inset-x-0 lg:inset-x-0 '>
<footer className='bg-dark-grey fixed md:fixed lg:static
bottom-0 md:bottom-0 lg:bottom-0
flex justify-around mt-auto
left:0
'>
<a className=' text-sm text-white p-0 md:p-0 lg:p-2 ml-2 md:mr-0 lg:mr-0'>© 2021 Health Service Executive</a>
<a className='underline text-sm text-white p-0 md:p-0 lg:p-2 ml-2 md:mr-0 lg:mr-0'>HSELive - We're here to help</a>
<a className='underline text-sm text-white p-0 md:p-0 lg:p-2 ml-2 md:mr-0 lg:mr-0'>Cookie statement</a>
<a className='underline text-sm text-white p-0 md:p-0 lg:p-2 mr-2 md:mr-0 lg:mr-0'>Accessibility</a>
<a className='underline text-sm text-white p-0 md:p-0 lg:p-2 ml-2 md:mr-0 lg:mr-0'>Privacy</a>
<a className='underline text-sm text-white p-0 md:p-0 lg:p-2 ml-2 md:mr-0 lg:ml-0'>Disclaimer</a>
</footer>
</div>
component.js
<div className="min-h-screen relative md:relative lg:relative
z-0 backdrop-opacity-95
w-full md:w-full lg:w-full xl:w-full
h-72 md:h-80 lg:h-96 lg:bg-bottom
md:shrink-0
">
<img className="h-80 md:h-72 lg:h-96" src="assets/vaccine-banner-flip.png" />
<div className="absolute md:absolute lg:absolute top-12 md:top-16
lg:top-20 left-8 md:left-40 lg:left-48 ">
<h1 className="text-3xl md:text-3xl lg:text-5xl font-bold ">Welcome to the HSE <br/>Data Protection Portal</h1>
{/* cards for logins */}
<div className="
grid grid-cols-1 md:grid-cols-2 lg:flex justify-center
mt-96 md:mt-24 lg:mt-32
mb-32 md:mb-0 lg:mb-0">
<div className="md:w-72 lg:w-80 h-72 md:h-66 lg:h-72">
<section className="bg-dark-green h-16 w-72">
<h2 className="text-white text-xl font-bold p-2">
I have already created my secure profile
</h2>
<div className="bg-white text-black container">
<li className="text-lg-2 list-disc">
If you have already completed the registration process you can
login to your profile using your username and password
</li>
<button className="mt-10 bg-purple-hse text-white font-bold p-2 rounded-sm w-44 ml-10 ">
Login
</button>
</div>
</section>
</div>
