Search code examples
htmlcssresponsive

CSS animated header with responsive issues

I have a website header that uses span tags to create an animated effect on the letters of the Header that uses 3 words. When the viewport changes, the letters break up instead of the 3 words, or the header cuts off completely without breaking at all.

I've tried changing the display, and breaking up the words into DIVs or additional SPAN tags. I've also tried using responsive breaks, and adjusting the white-space.

    <header>
        <div class="flan">
            <span style="--i:1">F</span>
            <span style="--i:2">L</span>
            <span style="--i:3">A</span>
            <span style="--i:4">N</span>
            <span style="--i:5">A</span>
            <span style="--i:6">G</span>
            <span style="--i:7">A</span>
            <span style="--i:8">N</span>
            <span style="--i:9"> </span>
            <span style="--i:10">A</span>
            <span style="--i:11">N</span>
            <span style="--i:4">D</span>
            <span style="--i:5"></span>
            <span style="--i:6">A</span>
            <span style="--i:7">G</span>
            <span style="--i:8">A</span>
            <span style="--i:7">I</span>
            <span style="--i:8">N</span>
        </div>
    </header>

header {
    padding-left: 3%;
    padding-top: 1%;
    font-size: 65px;
    white-space: normal;
}

.flan {
    position: relative;
    white-space: nowrap;
}

.flan span {
    position: relative;
    display: inline-block;
    font-size: 40px;
    color: #fff;
    text-transform: uppercase;
    animation: flip 2s infinite;
    animation-delay: calc(.2s * var(--i));
    justify-content: center;
    align-content: center;
}
Solution

  • welcome Try styling that header with a static width and height Hope that helps, if it does, consider making this the accepted answer.