Footer blocking button

November 19, 2022

I have a footer that’s fixed to the bottom of the page but when I get to the bottom it blocks a button. How do I go about fixing this issue?

Footer.jsx

import "./Footer.css";

const Footer = () => {
  return (
    <footer>
      <p>Copyright © 2022</p>{" "}
    </footer>
  );
};

export default Footer;

Footer.css

footer {
  position: fixed;
  bottom: 0;
  font-size: 1.2rem;
  left: 0;
  padding: 1rem;
  text-align: center;
  width: 100%;
}

>Solution :

Try this

footer {
  position: static;
  bottom: 0;
  font-size: 1.2rem;
  left: 0;
  padding: 1rem;
  text-align: center;
  width: 100%;
}

Analysis

You made position: fixed for the footer, so anything which goes behind that will gets hidden. Instead, for the footer, we can use position: static so that the footer will position itself with the flow.

For more info – position at mdn