Here’s my store: tenthandrose.com
I have the following css on my home page:
@media only screen and (min-width: 750px){
.rolling-tine {
width: 150px;
animation: rotate .5s linear infinite;
animation-play-state: paused;
animation-delay: calc(var(–scroll) * -1s);
animation-iteration-count: 1;
animation-fill-mode: both;
}
@keyframes rotate
{
0% {left:0px; transform:rotate(0deg)}
50% {left:100%; margin-left:100%;transform:rotate(360deg)}
100% {left:0px; transform:rotate(0deg)}
}
}
/body {
min-height: 500vh;
}/
.rolling-text {
font-size: xx-large;
text-align: center;
font-style: italic;
}
.custom__item-inner {
min-width: 1200px;
}
}
@media only screen and (max-width: 749px){
.rolling-tine {
width: 100px;
margin: auto;
animation: rotatesm 5s linear infinite;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
@keyframes rotatesm {
to {transform: rotate(360deg);}
}
}
.rolling-text {
font-size: x-large;
font-style: italic;
}
.custom__item-inner {
text-align: center;
}
For resolution over 749px the red spider tine scrolls across the page when the user scrolls up and down.
Under 749px the spider tine is supposed to be stationary and just spin.
This worked with this exact code in my Debut store but I’ve converted to the Dawn theme and this is the last thing I can’t get working.
Problem is that when you inspect the home page you see the css for media over 749 but if you reduce the screen size to less than that there is no css at all but it’s in my code.
A