- Image 1: Normal View,
- Image 2: When the keyboard is enabled, the card jumps up and when I close it's normal.
Is this behavior normal? Or is there a fault in my CSS? I utilized 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>
</>
)
}