On my homepage, you'll find a layout that initially appears like this:
However, when I resize the page or view it on a mobile device, it transforms into this:
All of this is contained within an <h1> tag, and the current styles are as follows:
h1 {
color: #fff;
font-size: 100px;
line-height: 75px;
margin: 0;
font-family: 'Coolvetica';
font-weight: 400;
img {
width: 46px;
margin-left: 20px;
opacity: 0;
height: auto;
animation: rotateIn 1s linear both;
animation-delay: 1.4s;
}
}
I've experimented with different approaches, such as adjusting overflow settings, utilizing vw instead of px for font-size, but none seem to achieve the desired outcome.