Footer Screenshot Top - chrome Bottom - firefox
I'm currently following a React portfolio tutorial on YouTube, and I'm sure that I've accurately followed the code in the JSX files down to the CSS. However, for some reason, there is a space below my footer. I have already checked all the CSS files and could not find any issues that could lead to the problem. I also checked through the DevTools, but I still couldn't identify the problem. I tried opening the app in Firefox and Edge, and there is no space below the footer, so I suspect it could be a browser-specific issue. I'm currently using Google Chrome by default.
By the way, I have a floating navbar, but it's not causing the issue with the spacing, in case you're wondering.
Has anyone experienced this before, and were you able to resolve it?
Thank you very much!
JSX for App:
function App() {
return (
<>
<Header />
<Nav />
<About />
<Experience />
<Services />
<Portfolio />
<Testimonials />
<Contact />
<Footer />
</>
)
}
General Styling (code snippets only from index.css):
/* CSS Reset */
*{
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
html {
scroll-behavior: smooth;
}
::-webkit-scrollbar {
display: none;
}
body {
font-family: 'Poppins', sans-serif;
background: var(--color-bg);
color: var(--color-white);
line-height: 1.7;
background-image: url('./assets/bg-texture.png');
}
.container {
width: var(--container-width-lg);
margin: 0 auto;
}
section {
margin-top: 8rem;
}
I also tried commenting out section {margin-top: 8rem;} from my index.css and that removed the space below the footer but only in desktop view. When I try to view in smaller screens the space is still there and I don't really want to opt for this solution because it messes up the spacing across the application and like I've mentioned above, even before removing this specific css, it works in 2 different browsers.
Here's the link to deployed app: https://vite-test01.vercel.app/
JSX For Footer:
function Footer(){
return(
<footer>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<a href='#' className='footer__logo'>LISA</a>
<ul className='permalinks'>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<li><a href='#'>Home</a></li>
<li><a href='#about'>About</a></li>
<li><a href='#experience'>Experience</a></li>
<li><a href='#services'>Services</a></li>
<li><a href='#portfolio'>Portfolio</a></li>
<li><a href='#testimonials'>Testimonials</a></li>
<li><a href='#contact'>Contact</a></li>
</ul>
<div className="footer__socials">
<a href='https://facebook.com'><FaFacebook /></a>
<a href='https://instagram.com'><FiInstagram /></a>
<a href='https://twitter.com'><IoLogoTwitter /></a>
</div>
<div className="footer__copyright">
<small>© LISA Portfolio. All rights reserved.</small>
</div>
</footer>
)
}
CSS For Footer:
footer {
background: var(--color-primary);
padding: 3rem 0;
text-align: center;
font-size: 0.9rem;
margin-top: 7rem;
}
footer a {
color: var(--color-bg);
}
.footer__logo {
font-size: 2rem;
font-weight: 500;
margin-bottom: 2rem;
display: inline-block;
}
.permalinks {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
margin: 0 auto 3rem;
padding: 0;
}
.footer__socials {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 4rem;
}
.footer__socials a {
background: var(--color-bg);
color: var(--color-white);
padding: 0.8rem;
border-radius: 0.7rem;
display: flex;
border: 1px solid transparent;
}
.footer__socials a:hover {
background: transparent;
color: var(--color-bg);
border-color: var(--color-bg);
}
.footer__copyright {
margin-bottom: 4rem;
color: var(--color-bg);
}
/* MEDIA QUERIES FOR MOBILE PHONES (SMALL DEVICES) */
@media screen and (max-width: 600px){
.permalinks {
flex-direction: column;
gap: 1.5rem;
}
.footer__socials {
margin-bottom: 2.6rem;
}
}
