0

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;
}
crouton
  • 5
  • 2

1 Answers1

0

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

nolawi
  • 4,439
  • 6
  • 22
  • 45
  • The viewpoint seems to maybe use the screen instead of the circle stamp, so it actually makes the font size a lot larger – crouton Jan 26 '22 at 19:13
  • I placed my code in codepen, so you can see if you switch out the CSS line 43 with font-size: 3.2vw; the header becomes larger https://codepen.io/upillai4444/pen/zYPxZRX – crouton Jan 26 '22 at 19:24
  • https://codepen.io/nolawi/pen/eYemWBO – nolawi Jan 26 '22 at 20:01
  • Thanks, but that resizes the circle itself and keeps the header.title the same size. I can just adjust the font size to keep it constant for that. I'm looking the the title to have a max size, and if the text expands beyond the circle, the lower the font size. – crouton Jan 26 '22 at 20:21
  • refer to https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container for workarounds – nolawi Jan 26 '22 at 20:45