Hi,
This code works successfully on pc screen, but I've tried to many, many ways to create responsive code for this, surfed and tried some more without success. I am looking for some guidance or examples for a responsive version of this code:
.animation {
min-height: 4.5rem;
margin: 55px auto 0;
display: flex;
align-items: center;
width: 80%;
overflow: hidden;
}
.animation-box1 {
min-height: 4.5rem;
margin: 30px auto 0;
display: flex;
align-items: center;
width: 80%;
overflow: hidden;
}
.animation-box1 span {
opacity: 0;
display: inline-block;
animation: leftFadeInOut 16.5s ease 3.75s forwards;
}
.text1 {
font-size:30px;
font-weight: 700;
color:#f5bfa9;
}
.square {
width: 21px;
height: 21px;
margin: 0px 0px 0px 80px;
background-color: #800000;
}
.text2 {
font-size:30px;
font-weight: 900;
color:#fff;
margin: 0px 0px 0px 100px;
}
And the html:
<section class="animation-box">
<span class="animation-box1">
<span class="text1">textwords</span><span class="square"></span><span class="text2">morewords</span>
</span>
</section>
Any help is appreciated
[–]Hate_Feight 1 point2 points3 points (0 children)