I've checked previous answers here on SO but I still dont have a working solution. I have a gatsby static site which on desktop i've implemented an infinite scrolling background, and on mobile its suppose to be just a still image of the same background. The strange thing is I'm only having an issue on the landing page, I'm implementing the same thing on every other page. Also this issue only shows up after deployment. everything looks fine as I'm using safari to build. My styling looks like a plate of spaghetti because I've just been at a loss and so I've just been trying anything i can think of...
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}}>
<motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 0.5}}>C</motion.h1>
<motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 1}}>a</motion.h1>
<motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 1.5}}>m</motion.h1>
<motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 2}}>C</motion.h1>
<motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 2.5}}>o</motion.h1>
</motion.div>
<motion.div initial={{opacity: 1}} animate={{opacity: 0}} transition={{duration: 1, delay: 15}}>
<motion.div initial={{y: 0}} animate={{y: -310}} transition={{duration: 2, delay: 5}}>
<motion.div className="tagline-container" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2, delay: 2}}>
<motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 0.3, times: [0, 0.1, 0.12, 0.2], delay: 2}}>We</motion.h1>
<motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 0.6, times: [0, 0.1, 0.12, 0.2], delay: 2}}> are</motion.h1>
<motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 0.9, times: [0, 0.1, 0.12, 0.2], delay: 2}}>the</motion.h1>
<motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 1.2, times: [0, 0.1, 0.12, 0.2], delay: 2}}>future</motion.h1>
<motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 1.5, times: [0, 0.1, 0.12, 0.2], delay: 2}}>of</motion.h1>
<motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 1.8, times: [0, 0.1, 0.12, 0.2], delay: 2}}>entrepreneurship</motion.h1>
</motion.div>
<motion.div className="tagline-container" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2}}>
<motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 2.1, times: [0, 0.1, 0.12, 0.2], delay: 2}}>and</motion.h1>
<motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 2.4, times: [0, 0.1, 0.12, 0.2], delay: 2}}>business</motion.h1>
<motion.h1 className="tagline" initial={{opacity: 0}} animate={{opacity: [0, 0.33, 0, 0.66, 1]}} transition={{duration: 2.7, times: [0, 0.1, 0.12, 0.2], delay: 2}}>development.</motion.h1>
</motion.div>
</motion.div>
<motion.div initial={{opacity: 0, y: 100}} animate={{opacity: 1, y: -295}} transition={{duration: 2, delay: 5}}>
<motion.div className="cta-section" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1}}>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 0.2, delay: 6.5}}>The</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 0.4, delay: 6.5}}>vision</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 0.6, delay: 6.5}}>and</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 0.8, delay: 6.5}}>mission</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1, delay: 6.5}}>for</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1.2, delay: 6.5}}>CamCo</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1.4, delay: 6.5}}>Commercial</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1.6, delay: 6.5}}>Inc</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1.8, delay: 6.5}}>is</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2, delay: 6.5}}>to</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2.2, delay: 6.5}}>create</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2.4, delay: 6.5}}>a</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2.6, delay: 6.5}}>platform</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 2.8, delay: 6.5}}>to</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 3, delay: 6.5}}>empower</motion.h3>
</motion.div>
<motion.div className="cta-section" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1}}>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 3.2, delay: 6.5}}>the</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 3.4, delay: 6.5}}>future</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 3.6, delay: 6.5}}>leaders</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 3.8, delay: 6.5}}>of</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 4, delay: 6.5}}>our</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 4.2, delay: 6.5}}>world</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 4.4, delay: 6.5}}>by</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 4.6, delay: 6.5}}>creating</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 4.8, delay: 6.5}}>a</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 5, delay: 6.5}}>network</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 5.2, delay: 6.5}}>of</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 5.4, delay: 6.5}}>businesses</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 5.6, delay: 6.5}}>and</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 5.8, delay: 6.5}}>business</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 6, delay: 6.5}}>opportunities</motion.h3>
</motion.div>
<motion.div className="cta-section" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 1}}>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 6.2, delay: 6.5}}>that</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 6.4, delay: 6.5}}>will</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 6.6, delay: 6.5}}>provide</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 6.8, delay: 6.5}}>employment</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 7, delay: 6.5}}>for</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 7.2, delay: 6.5}}>thousands</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 7.4, delay: 6.5}}>of</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 7.6, delay: 6.5}}>people</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 7.8, delay: 6.5}}>around</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 8, delay: 6.5}}>the</motion.h3>
<motion.h3 className="cta" initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: 8.2, delay: 6.5}}>world.</motion.h3>
</motion.div>
</motion.div>
</motion.div>
<motion.div className="logo-container" initial={{opacity: 0, y:-780}} animate={{opacity: 1, y:-780}} transition={{duration: 2, delay: 16}}>
<motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 0.5}}>C</motion.h1>
<motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 1}}>a</motion.h1>
<motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 1.5}}>m</motion.h1>
<motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 2}}>C</motion.h1>
<motion.h1 className="cclogo" initial={{opacity: 0, y:100}} animate={{opacity: 1, y:0}} transition={{damping: 2, duration: 2.5}}>o</motion.h1>
</motion.div>
<motion.div className="mobile-landing-nav">
<motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 1}}>
<motion.div>
<Link className="hamburger" to="/mobile/"><motion.h1 className="cclogo-mobile" initial={{opacity: 0}} animate={{opacity: 1}} transition={{ duration: 2.5}}>CamCo</motion.h1></Link>
</motion.div>
</motion.div>
<motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 2}}>
<motion.div className="mobile-nav-spacing">
<Link className="mobile-nav-item" to="/about/">ABOUT</Link>
</motion.div>
</motion.div>
<motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 3}}>
<motion.div className="mobile-nav-spacing">
<Link className="mobile-nav-item" to="/companies/">COMPANIES</Link>
</motion.div>
</motion.div>
<motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 4}}>
<motion.div className="mobile-nav-spacing">
<Link className="mobile-nav-item" to="/philanthropy/">PHILANTHROPY</Link>
</motion.div>
</motion.div>
<motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 5}}>
<motion.div className="mobile-nav-spacing">
<Link className="mobile-nav-item" to="/riseabove/">RISE ABOVE</Link>
</motion.div>
</motion.div>
<motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 6}}>
<motion.div className="mobile-nav-spacing">
<Link className="mobile-nav-item" to="/team/">OUR TEAM</Link>
</motion.div>
</motion.div>
<motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 6}}>
<motion.div className="mobile-nav-spacing">
<Link className="mobile-nav-item" to="/press/">PRESS</Link>
</motion.div>
</motion.div>
<motion.div initial={{ opacity: 0 }} animate={{opacity: 1}} transition={{duration: 7}}>
<motion.div className="mobile-nav-spacing">
<Link className="mobile-nav-item" to="/contact/">CONTACT</Link>
</motion.div>
</motion.div>
</motion.div>
<motion.div className="background-container">
<motion.div className="background-image-x" initial={{ opacity: 0}} animate={{opacity: 1}} transition={{ duration: 1 }}></motion.div>
<motion.img className="landing-background-image-x" key={BackgroundImage} src={BackgroundImage} initial={{ opacity: 0}} animate={{opacity: 1}} transition={{ duration: 0.75 }}/>
</motion.div>
</div>
)
}
export default Home
My scss file:
html body {
margin: 0;
padding: 0;
}
@media only screen and (max-width: 800px) {
.nav-item {
display: none;
}
}
@media only screen and (min-width: 800px) {
.hamburger {
display: none;
}
}
.hamburger:hover {
text-decoration: none;
}
@media only screen and (max-width: 768px) {
.mobile-landing-nav {
margin-top: 30px;
display: flex;
flex-direction: column;
}
}
@media only screen and (min-width: 768px) {
.mobile-landing-nav {
display: none;
}
}
.mobile-container {
display: flex;
flex-direction: column;
align-content: space-between;
margin-top: 1px;
margin-left: 30px;
}
.mobile-nav-spacing {
margin-left: 18px;
margin-top: 8px;
margin-bottom: 8px;
align-content: space-around;
}
.mobile-nav-item {
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
padding-left: 4px;
text-decoration: none;
letter-spacing: 5px;
font-weight: 300;
font-size: 12px;
color: white;
border-bottom-color: white;
border-bottom-width: thick;
}
.nav-item {
display: fixed;
margin-left: 20px;
margin-right: 20px;
padding-left: 4px;
text-decoration: none;
letter-spacing: 5px;
font-weight: 300;
font-size: 12px;
color: white;
border-bottom-color: white;
border-bottom-width: thick;
}
.nav-item:hover {
text-decoration: none;
color: white;
}
.mobile-nav-item:hover {
text-decoration: none;
color: white;
}
.carousel-item {
background-color: blue;
width: 400px;
height: 400px;
}
button.navbar-toggler {
justify-content: center;
}
@media only screen and (max-width: 768px) {
// .mobile-landing-background-x {
// background: url("../../static/Untitled-1.jpg");
// object-fit: cover;
// min-width: 100%;
// min-height: 130%;
// height: 110%;
// position: fixed;
// bottom: -10%;
// right: 0;
// z-index: -4;
// }
.landing-background-image-x {
background: url("../../static/Untitled-1.jpg");
object-fit: cover;
min-width: 100%;
min-height: 100%;
height: 110%;
position: fixed;
bottom: -10%;
right: 0;
z-index: -2;
}
.nav-background-image-x {
background: url("../../static/Untitled-1.jpg") 0 0 ;
// height: 900px;
// width: 4320px;
// animation: slide 90s linear infinite;
background-size: cover;
min-width: 100%;
min-height: 100%;
height: 110%;
position: fixed;
bottom: -10%;
right: 0;
z-index: -4;
}
.background-container div {
display: none;
}
.background-image-x {
background: url("../../static/Untitled-1.jpg");
// height: 100%;
// width: 300%;
// animation: slide 120s linear infinite;
object-fit: cover;
min-width: 100%;
min-height: 100%;
height: 110%;
position: fixed;
bottom: -10%;
right: 0;
z-index: -3;
}
}
@media only screen and (min-width: 768px) {
.mobilel-landing-background-x {
display: none;
}
.nav-background-image-x {
// background: url("../../static/Untitled-1.jpg") repeat-x;
// height: 900px;
// width: 4320px;
// animation: slide 90s linear infinite;
object-fit: cover;
min-width: 100%;
min-height: 100%;
height: 110%;
position: fixed;
bottom: -10%;
right: 0;
z-index: -4;
}
.background-image-x {
background: url("../../static/Untitled-1.jpg") repeat-x;
height: 900px;
width: 4320px;
animation: slide 90s linear infinite;
// object-fit: cover;
// min-width: 100%;
// min-height: 100%;
// height: 110%;
// position: fixed;
// bottom: -10%;
// right: 0;
z-index: -3;
}
}
@keyframes slide{
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(1440px, 0, 0);
}
}
.background-container {
overflow: hidden;
z-index: -6;
}
@media only screen and (max-width: 768px) {
.mobile-background-image {
object-fit: cover;
min-width: 100%;
min-height: 100%;
position: fixed;
top: 13%;
bottom: -10%;
right: 0;
z-index: -2;
}
.background-container div {
display: none;
}
.background-image {
object-fit: cover;
min-width: 100%;
min-height: 100%;
position: fixed;
top: 13%;
bottom: -10%;
right: 0;
z-index: -2;
}
}
@media only screen and (min-width: 768px) {
.background-container img {
display: none;
}
.mobile-background-image {
display: none;
}
.background-image {
background: url("../../static/Untitled-2.jpg") repeat-x;
height: 900px;
width: 4320px;
animation: slide 120s linear infinite;
position: fixed;
top: 6%;
bottom: -10%;
right: 0;
z-index: 1;
pointer-events: none;
}
.alt-background-image {
background: url("../../static/Untitled-2.jpg") repeat-x;
height: 120%;
width: 120%;
animation: slide 90s linear infinite;
position: fixed;
top: 6%;
bottom: -10%;
right: 0;
z-index: -4;
pointer-events: none;
}
}
.intro-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
@media only screen and (max-width: 768px) {
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
}
@media only screen and (min-width: 768px) {
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.logo-container {
display: flex;
flex-direction: row;
justify-content: center;
margin-left: 2.5%;
}
.cclogo {
color: white;
font-family: "georgia";
font-size: 300px;
font-weight: 800;
text-shadow: 10px 10px 10px rgba(0,15,44,0.6);
}
.cclogo-mobile {
margin-top: 5px;
margin-left: 35px;
color: white;
font-family: "georgia";
font-size: 40px;
font-weight: 800;
text-shadow: 10px 10px 10px rgba(0,15,44,0.6);
text-decoration: none;
}
.cclogo-mobile:hover {
text-decoration: none;
color: white;
font-family: "georgia";
font-size: 40px;
font-weight: 800;
text-shadow: 10px 10px 10px rgba(0,15,44,0.6);
}
.tagline-container {
display: flex;
flex-direction: row;
justify-content: center;
}
.tagline {
padding-left: 17px;
font-weight: 300;
letter-spacing: 6px;
font-size: 50px;
text-align: center;
text-shadow: 3px 3px 5px rgba(0,15,44,0.73);
}
.cta-section {
display: flex;
flex-direction: row;
justify-content: center;
}
.cta {
letter-spacing: 2px;
padding-left: 8px;
font-weight: 300;
text-shadow: 2px 2px 3px rgba(0,15,44,1);
padding-bottom: 0.4%;
}
@media only screen and (max-width: 768px) {
.logo-container {
display: none;
}
.cclogo {
display: none;
}
.tagline-container {
display: none;
}
.tagline {
display: none;
}
.intro-nav {
display: none;
}
.cta-section {
display: none;
}
.cta {
display: none;
}
}
@media only screen and (min-width: 768px) {
.logo-container-2 {
display: none;
}
}
Any help would be greatly appreciated!!!
Without seeing the HTML that creates the landing page navigation it's difficult to know whether this is the complete answer or not, but these settings may be worth looking at (and there may be others)
An IOS machine with dimensions 768x1024 will pass both tests, and the one that is used will be the one which has display: none. Is this intended?
There are others too such as:
which a 768x1024 device will pass - so it's sort of mobile, but big enough to be considered not mobile??