Hi there! I've been working on adding some CSS code to my ReadyMag project, but I'm having trouble with odd aspect ratio browser windows. The code I have is almost doing what I want, but it's not covering the full width and height. How can I make sure it covers both dimensions?
<div class="colorchange"></div>
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst
{
0% {background: #FF85E5; left:0px; top:0px;}
25% {background: #D8F0FB; left:0px; top:0px;}
50% {background: #EAFFE9; left:0px; top:0px;}
75% {background: #FFFEDE; left:0px; top:0px;}
100% {background: #F3E9FF; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes myfirst
{
0% {background: #FF85E5; left:0px; top:0px;}
25% {background: #D8F0FB; left:0px; top:0px;}
50% {background: #EAFFE9; left:0px; top:0px;}
75% {background: #FFFEDE; left:0px; top:0px;}
100% {background: #F3E9FF; left:0px; top:0px;}
}
/* CSS for the text */
.colorchange {
max-width: 100%;
min-height: 100%;
margin: 0;
/* Chrome, Safari, Opera */
-webkit-animation-name:myfirst;
-webkit-animation-duration:10s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
/* Standard syntax */
animation-name:myfirst;
animation-duration:20s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
}
I've experimented with different .colorchange attributes, including just width: 100%, width 100%, and height 100%, as well as setting both max and min heights to 100%, and using height: 100vh;
If you have any suggestions or advice, please let me know. Thank you!