Question: for this code please make it work in smaller screen while also have the animation please help . main 1 { height: 1 0 0

for this code please make it work in smaller screen while also have the animation please help .main1{
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.roller1{
height: 4.125rem;
line-height: 4rem;
position: relative;
margin-bottom: 30px;
overflow: hidden;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #E36414;
}
#spare-time {
font-size: 1rem;
font-style: italic;
letter-spacing: 1rem;
margin-top: 0;
}
#rolltext {
margin-top: 6px;
}
.roller1 #rolltext {
position: absolute;
top: 0;
animation: slide 5s infinite;
}
@keyframes slide {
0%{
top: 0;
}
25%{
top: -4rem;
}
50%{
top: -8rem;
}
72.5%{
top: -12.25rem;
}
}
@media screen and (max-width: 600px){
.main1 h1{
text-align: center;
text-transform: uppercase;
color: #F1FAEE;
font-size: 2.125rem;
}

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!