'Dynamic font sizing by parent container [duplicate]

Hopefully I did this correctly. I have code from my Dev team which takes data from the DB to populate a "stamp" unique to each page. The stamp is just a circle with 2 lines of text. The issue is the 1st line of text is sometimes larger than the circle size. What I'd like to do is have the font for HEADER.TITLE resize to fit inside the circle when it's too large. Any help would be great. Thanks EDIT: this got flagged as a duplicate, but the other question's answer was to use viewpoint, which doesn't work here. I added my code online in case someone wants to play around: https://codepen.io/upillai4444/pen/zYPxZRX

<div class="filter-tile-box" >
    
    <style>
        .simple-circle h5{
            color:#${COLOR.TEXT,0};
        }
        .simple-circle h1{
            color:#${COLOR.TEXT,0};
        }
    </style>
    
    <div class="simple-circle" style="background-color:#${COLOR.NAME,0};">
        <div>
            <h1>${HEADER.TITLE}</h1>
            <h5><p>${HEADER.SUBTITLE}</p></h5>
        </div>
    </div>

</div> 

iq-filter-data-source{
    height: 100%;
}
iq-stamp-filter-renderer{
    height: 100%;
}
.filter-box-container{
    height: 100%;
}
.filter-stamp{
    height: 100%;
}
.filter-tile-box{
    display:flex;
    justify-content:center;
    align-items:center;
}


.simple-circle {
    height: 4em;
    width: 4em;

    aspect-ratio: 1;
    border-radius:50%;
    border-width: 15px;
    border-color:black;
    border: 5px solid #002D3A;
    padding: 4em;
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    align-items: center;
    font-size: 1.5em;
    text-align:center;
}

.simple-circle h5{
    font-size: .75em;
}
.simple-circle h1{
    font-weight: bold;
    font-size: 2em;
}
css


Solution 1:[1]

You can use viewport size units for the font size

h1 { font-size: 3.2vw;} 
h5 { font-size: 3.0vh;}

3.2vw = 3.2% of width of viewport 3vh = 3% of height of viewport

alternatively you can use the

font-size: calc()

see example here: https://codepen.io/CrocoDillon/pen/fBJxu using vh for the container as well

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions