I've searched through previous answers on the SO platform, but I'm still unable to find a solution that works for me. I have a static Gatsby site with an infinite scrolling background implemented on desktop, and a static image displayed on mobile. The strange issue is that this problem only occurs on the landing page, while other pages work fine. This problem arises after deployment, even though everything seems fine during development using Safari. My CSS styling resembles a plate of spaghetti as I've been trying various approaches without success...
Here's my code:
import React from "react";
import './index.scss';
import Navbar from '../components/camconavbar.js';
import BackgroundImage from '../../static/Untitled-1.jpg';
import Particles from '../components/particles.js';
import ParticleCamCo from '../../static/CamCo(solid).svg';
import { motion, AnimatePresence } from 'framer-motion';
import { Link } from 'gatsby';
const Home = ({ isVisible }) => {
return (
<div className="container">
<motion.div className="intro-nav" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 5, delay: 17}}>
<Navbar className="intro-nav" />
</motion.div>
<Particles />
<motion.div className="logo-container" initial={{opacity: 1}} animate={{opacity: 0}} transition={{duration: 1, delay: 5}}>
...
My SCSS file:
html body {
margin: 0;
padding: 0;
}
@media only screen and (max-width: 800px) {
.nav-item {
display: none;
}
}
...
If anyone can provide some guidance, it would be highly appreciated!