How to Make React Footer/Content Fully Responsive?


I’m new to React and having a little trouble working out how to structure my website. I’m using React-Bootstrap and Bootstrap 5. I want a responsive design that scales/displays the same on all devices (and when rotate phone). As you can see in my images below it’s not scaling down:

Portrait Phone

Landscape Phone

This is my App.js:

        function App() {
          return (
            <div>
              <Container fluid>
                <Row className="row">
                  <Col className="col">
                    <CenterTitle />
                  </Col>
                </Row>
                <Row className="row" id="footer">
                  <Col className="col">
                    <Footer />
                  </Col>
                </Row>
              </Container>
        
              <ParticleBackground />
              {/* <FontAwesomeIcon icon={["fas", "ellipsis-v"]}  opacity="0.1" color="green" size={["10x"]} className="fa-icon img-fluid" max-width="100%" /> */}
            </div>
          );
    }

function CenterTitle() {
  return (
    <div id="text_div center_all">
      <div className="center_all">
        <img
          className="img-fluid"
          width="auto"
          max-width="100%"
          height="auto"
          src="ChatLogoTransparent2.png"
          alt="Chatoshi Logo"
        />
        <h3 className="custom-subTitle text-center">Coming Soon</h3>
      </div>
    </div>
  );
}

function Footer() {
  return (
    // {/* Remove the container if you want to extend the Footer to full width. */}
    <div>
      <footer
        className="text-center text-lg-start"
        style={{ backgroundColor: "#000000" }}
      >
        <div className="container text-center justify-content-center py-3">
          <a href="https://facebook.com">
            <button
              type="button"
              className="btn btn-primary btn-lg mx-2"
              style={{ backgroundColor: "#54456b" }}
            >
              <i className="fab fa-facebook-f" />
            </button>
          </a>
          <a href="https://twitter.com">
            <button
              type="button"
              className="btn btn-primary btn-lg mx-2"
              style={{ backgroundColor: "#54456b" }}
            >
              <i className="fab fa-twitter" />
            </button>
          </a>
          <a href="https://github.com">
            <button
              type="button"
              className="btn btn-primary btn-lg mx-2"
              style={{ backgroundColor: "#54456b" }}
            >
              <i className="fab fa-github" />
            </button>
          </a>
          <a href="https://linkedin.com">
            <button
              type="button"
              className="btn btn-primary btn-lg mx-2"
              style={{ backgroundColor: "#54456b" }}
            >
              <i className="fab fa-linkedin" />
            </button>
          </a>
        </div>
        {/* Copyright */}
        <div
          className="text-center text-white p-3"
          style={{ backgroundColor: "rgba(0, 0, 0, 0.2)" }}
        >
          © 2021 Copyright:
          <a className="text-white" href="">
            {" "}
            Pioneer TM
          </a>
        </div>
        {/* Copyright */}
      </footer>
    </div>
    // {/* End of .container */}
  );
}

export default App;

This is my App.css:

#text_div {
  position: relative;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: 10px;
}

.center_all {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  position: absolute;
  color: rgba(0, 0, 0, 0.319);
}

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 85px; /* Height of the footer */
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  /* background:#6cf; */
}

The other problem is when I put the Footer component inside a React-Bootstrap Row, the Buttons stopped working? Thanks for your help in advance!

Source: React – Stack Overflow

November 26, 2021
Category : News
Tags: bootstrap 5 | react-bootstrap | reactjs

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.