How To Use Percentage For Font In Different Screen Size

I have the following DIVs:

URGENT CARE WAIT

Solution 1:

You can use viewport units, that vary based on the defined container's size (width and/or height)

{
    font-size: 1vmin;
}

Being the possible values:

• vw - relative to viewport's width
• vh - relative to viewport's height
• vmin - relative to viewport's width or height (whichever is the smaller)
• vmax - relative to viewport's width or height (whichever is the larger)

Check out the W3's docs on Viewport Relative Lengths, that states:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

Solution 2:

You can use media-queries like here:

@media (max-width: 699px){
  .tckLeftHolder
{
    font-size: 8px; //or how much pixels you want
}
}