CODEWITHSUNDEEP
htmlcssreactjs
lazyCoder
lazyCoder

Reputation: 589

Footer is not staying at bottom of the page in tablet devices

I am building a website using React JS and I am facing a problem while building the footer component. It is looking good on mobile devices and desktop, but bad on tablet devices.

I want the footer to be stay in bottom of the page in tablet devices

Here's my code in React

Whole Page Component

    const SignUpPage = () => {
      return (
        <>
          <div className="signup__wrapper">
            <IndexNavbar logoOnly />
            <div className="signup__form__wrapper">
              <p>STEP 1 OF 3</p>
              <h1 className="font-weight-bold mt-2 mb-4">Sign up</h1>
              <Form>
                <div className="input__container">
                  <MailIcon className="icon_purple" />
                  <FormControl placeholder="[email protected]" />
                </div>
                <div className="input__container">
                  <HttpsIcon className="icon_purple" />
                  <FormControl placeholder="Add Password" />
                </div>
                <Button className="btn-block btn_white btn_white_rounded">
                  Continue
                </Button>
              </Form>
            </div>
          </div>
          <Footer />
        </>
      );
    };

Here is the CSS

.signup__form__wrapper {
    width: 600px;
    border: 1px solid #442e4d;
    background-color: #3e104f;
    color: #fff;
    padding: 50px 50px;
    margin: 80px auto;
}

.input__container {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 10px 20px;
    border-radius: 80px;
    margin-bottom: 20px;
}

.input__container input {
    border: none !important;
    box-shadow: none !important;
}

Can anyone help me out?

Upvotes: 0

Views: 198

Answers (1)

Shuvo
Shuvo

Reputation: 1293

One way you can achieve this.

First of all, put your Footer inside .signup__wrapper:

<div className="signup__wrapper">
  <IndexNavbar logoOnly />
  <div className="signup__form__wrapper">
    <p>STEP 1 OF 3</p>
    <h1 className="font-weight-bold mt-2 mb-4">Sign up</h1>
    <Form>
      <div className="input__container">
        <MailIcon className="icon_purple" />
        <FormControl placeholder="[email protected]" />
      </div>
      <div className="input__container">
        <HttpsIcon className="icon_purple" />
        <FormControl placeholder="Add Password" />
      </div>
      <Button className="btn-block btn_white btn_white_rounded">
        Continue
      </Button>
    </Form>
  </div>
  <Footer />
</div>

Then add the following styles in your css:

.signup__wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.signup__wrapper IndexNavbar, .signup__wrapper .signup__form__wrapper, .signup__wrapper Footer {
  width: 100%;
}

.signup__wrapper Footer {
  margin-top: auto;
}

Using flex and flex-direction: column we can get the same layout as you were getting already. But with a difference is that margin-top: auto of Footer will push it towards the bottom of the page as long as there is space.

Upvotes: 1

Related Questions