CODEWITHSUNDEEP
htmlcss
user5309698
user5309698

Reputation: 25

How to make font text responsive on resize?

I have a div which is responsive but text content is not responsive it is not decreasing as the width change.

HTML

<div class="circle">Hello I want to resize.</div>

CSS

.circle
    {
    width:100%;
    height:100%;
    border-radius:250px;
    font-size:200%;
    color:#fff;
    text-align:center;
    background:#000
    }

Demo

Upvotes: 1

Views: 568

Answers (1)

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

You can use viewport value instead of ems, pxs or pts.

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger

Try font-size:7vw;. 

.circle
{
width:100%;
height:100%;
border-radius:250px;
font-size:7vw; //changed this
color:#fff;
text-align:center;
background:#000
}

Demo here

Upvotes: 2

Related Questions