How to properly position animated numbers in a stacked css flexbox? - html

Question

I am trying to display animated text in a css flexbox. It should be displayed "30,538+" on first line and "Leggs Broken" on second line (dummy text). Both should be stacked in the center of the page (I have other text above and below it). The numbers are animated on hover with just CSS.
.legg-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-direction: row-reverse;
width: 100%;
text-align: center;
background-color: #ffffff;
}
.legg-desc {
color: #ae95da;
padding-top: 50px;
align-items: center;
}
/* number animation */
.legg body {
background: #fff;
margin: 0;
padding: 0;
}
.legg ul {
padding: 10px;
margin: 0;
display: flex;
position: absolute;
top: 30%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
margin-top: 225px;
}
.legg ul li {
list-style: none;
color: #ae95da;
float: left;
font-size: 0.5em;
font-family: 'Poppins', sans-serif;
transition: 0.9s;
font-weight: 400;
}
.legg ul:hover li {
transform: rotateY(360deg);
}
.legg ul:hover li:nth-child(1) {
transition-delay: 0.9s;
}
<div class="legg-section">
<h1 class="legg">
<ul>
<li>3</li>
<li>0</li>
<li>,</li>
<li>5</li>
<li>3</li>
<li>8</li>
<li>+</li>
<div style="clear: both"></div>
</ul>
</h1>
<h2 class="legg-desc">Leggs Broken</h2>
</div>
The first problem I am having is that the numbers jump up or down when the screen is resized. I am having trouble pinning it to a specific spot on the page. Second thing is to have it expand and shrink properly on screen size (a little buggy now).
I spent many hours trying to fix and troubleshoot this but nothing worked. Any help or suggestions would be very much appreciated!

Answer 1

I've tried to keep the style as much the same as possible. Basically, any positioning and floating has been removed. The rest is pretty straightforward.
.legg-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
.legg-desc {
color: #ae95da;
}
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
ul li {
color: #ae95da;
font-family: 'Poppins', sans-serif;
transition: 0.9s;
font-weight: 400;
}
/* number animation */
ul:hover li {
transform: rotateY(360deg);
}
ul:hover li:nth-child(1) {
transition-delay: 0.9s;
}
<div class="legg-section">
<ul>
<li>3</li>
<li>0</li>
<li>,</li>
<li>5</li>
<li>3</li>
<li>8</li>
<li>+</li>
</ul>
<h2 class="legg-desc">Leggs Broken</h2>
</div>