I'm struggling with a 4-slide animation that moves text from right to left. The issue I'm facing is maintaining the width and height to keep the text centered regardless of browser size changes.
The challenge lies in finding the correct ratio for the width and height to ensure the text stays in the middle, even when adjusting the browser window dimensions.
Here's the code snippet:
.frame{
border: 2px solid red;
height: 80px;
overflow: hidden;
}
.slidewrapper{
border: 2px solid blue;
width: 400%;
height: 100%;
animation: slideshow 24s;
animation-iteration-count:infinite;
position: relative;
left: 30px;
top: -150px;
}
.slide{
text-align: center;
height: 100%;
width: 25%;
float: right;
padding-top: 4%;
font-size: 13px;
}
.p1{
background-color: hotpink;
}
.p2{
background-color: blue;
}
.p3{
background-color: teal;
}
.p4{
background-color: green;
}
@keyframes slideshow {
0%{margin-left: -10% }
25%{margin-left: -100% }
50%{ margin-left: -200% }
75%{margin-left: -300% }
}
}<div class='frame'>
<div class="slidewrapper">
<div class="slide p1" style="color: blue">
Free shipping and handling on order over $50. CODE:<i>FREE50</i>
</div>
<div class='slide p2'> <p> Summer Sale </p>
<b> Starting Soon!</b>
<i>Exceptions apply</i>
</div>
<div class='slide p3'> <p> Summer Sale </p>
<b> Starting Soon!</b>
<i>Exceptions apply</i>
</div>
<div class='slide p4'><p> Summer Sale </p>
<b> Starting Soon!</b>
<i>Exceptions apply</i>
</div>
</div>
</div>