CSS: Card jumps up when keyboard is enabled in mobile screen

Question

[image 1[image 2]

• Image 1: Normal View,
• Image 2: When keyboard is enabled the card jumps up and when I close its normal

Is this behavior normal? or there's some fault in my CSS. I used styled-components for writing the CSS.

CSS

export const Container = styled.section`
  height: 92vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f5f5;
`;

export const Form = styled.form`
  display: flex;
  flex-direction: column;
  align-items: center;
`;

export const Card = styled.section`
  width: ${(props) => props.Width || '22rem'};
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  border-radius: 5px;
  box-shadow: 0px 2px 4px rgba(68, 47, 47, 0.5);
  background: white;
`;

export const Header = styled.header`
  min-height: 7vh;
  background: rgb(0, 5, 36);
`

Login.js

import React from 'react';
import {
  Card,
  Container,
  Form,
} from '../Styles/StyledProfile';
import TopHeader from '../Dashboard/Header';

function Login() {

return (
    <>
      <TopHeader />
      <Container>
        <Card>
          <Form>
          .....
          </Form>
         </Card>
        </Container>
      </>
   )

}

Answer 1

I think this is normal behavior but if you want to prevent login box to be on the top of the header, you could add this CSS:

export const Container = styled.section`
 min-height: 92vh;
 height: 100%;
`;

export const Card = styled.section`
  margin: 40px 0;
`;