Currently, I'm facing a challenge in creating a footer that stays at the bottom of the page without overlapping any other components.
In my index file, I've included the following code:
.footer{
margin-top: 1rem;
padding: 1rem;
background-color: #3D938B;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
I have treated the footer just like any other component on the page...
<Router>
<NavBar></NavBar>
<div className={classes.topMargin}>
<Route exact path="/contact-us" element={<ContactUs/>}/>
</div>
<Footer></Footer>
</Router>
The CSS for my contact-us page is as follows:
@media only screen and (max-width: 700px) {
.form-container {
text-align: center;
}
.button-submit {
background-color: white;
width:7rem;
border-radius: 10px;
border: 2px solid #3D938B;
color: #3D938B;
padding: 5px;
margin-bottom:20px;
}
}
Your help with this matter would be greatly appreciated!