I have successfully gotten my page to look how I'd like it to look for different size pages. I'm using it to ensure an animation stays in the right place on a page uses percentages.
I'm using @media(min-width: ---px)for each different size. However the page will only accept the different size media css after the page is refreshed.
Is there any way around this, disabling any cache settings or anything. I would understand why as the @media is for different size devices not different size pages on the same device however it would solve my problem.
#car { max-width: 10%; max-height: 10%; z-index: 2; -webkit-animation-name: drive; -webkit-animation-duration: 4s; animation-name: drive; animation-duration: 4s; animation-iteration-count:infinite;
}
@-webkit-keyframes drive { 0% {left:-10%; top: 15%;} 100% {left:110%; top: 15%;}
}
@media(min-width: 750px) { @-webkit-keyframes drive { 0% {left:-10%; top: 16%;} 100% {left:110%; top: 16%;} }
}
@media(min-width: 850px) { @-webkit-keyframes drive { 0% {left:-10%; top: 16%;} 100% {left:110%; top: 16%;} }
}
@media(min-width: 950px) { @-webkit-keyframes drive { 0% {left:-10%; top: 17%;} 100% {left:110%; top: 17%;} }
}
@media(min-width: 1050px) { @-webkit-keyframes drive { 0% {left:-10%; top: 18%;} 100% {left:110%; top: 18%;} }
}
@media(min-width: 1150px) { @-webkit-keyframes drive { 0% {left:-10%; top: 18%;} 100% {left:110%; top: 18%;} }
}
@media(min-width: 1250px) { @-webkit-keyframes drive { 0% {left:-10%; top: 19%;} 100% {left:110%; top: 19%;} }
}
@media(min-width: 1350px) { @-webkit-keyframes drive { 0% {left:-10%; top: 20%;} 100% {left:110%; top: 20%;} }
}