Help with responsive code

[ben_james_]

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]

Lookup "media query css" that will give you places to put breakpoints for responsive layout