This is a preview of my page:
https://i.sstatic.net/7uLH9.png
I attempted to apply position: relative to my PageContainer but the footer remains in place. How can I resolve this issue?
Below is the code from App.js:
const PageContainer = styled.div`
position: relative;
`;
function App() {
return (
<>
<GlobalStyle />
<PageContainer>
<TopNav />
<SideNav />
<RouterStyle>
<Router>
<ContactForm path="/contact" />
<ShopAllProducts path="/" />
<NewArrival path="/shop/new-arrival" />
<Product path="/product/:title_url" />
</Router>
</RouterStyle>
</PageContainer>
<Footer />
</>
);
}
Here is the code for Footer.js:
const FooterWrapper = styled.div`
padding: 10px 0;
font-family: ${fonts.Gotham};
font-size: ${fontSizes.sm};
font-weight: 500;
position: absolute;
bottom: 0;
background-color: red;
width: 100%;
`;
const FooterContainer = styled.div`
justify-content: space-between;
display: flex;
`;
const Footer = (props) => {
return (
<FooterWrapper>
<FooterContainer>
<LinkFooter to="/">Privacy & Policy</LinkFooter>
<Beuter2020>© 2020 THE BEUTER</Beuter2020>
<LinkFooter to="/">Facebook</LinkFooter>
</FooterContainer>
</FooterWrapper>
);
};
P.S.: I am utilizing styled-components for styling
After removing position: absolute, bottom:0
https://i.sstatic.net/NUDEq.png
You can check out the project on Github: https://github.com/nathannewyen/the-beuter