I've read numerous articles and posts about achieving this, but none of the methods seem to be effective for me.
My goal is to have the footer stick to the bottom of the page when viewed on mobile devices. It displays correctly on larger screens, but on mobile, it tends to position itself in the middle of Component.js unless a fixed position is applied.
I've experimented with various solutions, but I'm finding it difficult to get it to remain fixed. Please take a look at 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>