How to resize texts in all devices? - html

Question

I want to make text to be resize in all devices. It looks good when I view in on my PC but when I view it on my phone, it doesn't fit to the box and overlap with the button above and below
Here is my code
.container-profile {
position: relative;
width: 100%;
}
.image {
display: block;
max-width: 100%;
height: auto;
}
.overlay-profile {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container-profile :hover .overlay-profile {
opacity: 1;
}
.text {
color: white;
font-size: auto;
position: inherit;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-transform: translate(-50%, -50%);
}
<div class="wrapper bgded; container-profile">
<div class="container-profile">
<img src="https://www.kent.ac.uk/sportsciences/employability/images/image-pending.png" alt="Avatar" class="image">
<div class="overlay-profile">
<div class="text">
<p class="text-justify">SCORE (Standing Commitee on Research Exchange) merupakan Organisasi berbentuk Badan Semi Otonom, bersifat Independent dan berstatus sebagai satu-satunya organisasi penelitian mahasiswa Fakultas Kedoktean Universitas Sumatera Utara yang bergerak
di bidang penelitian dan kelimiahan. Berdiri pada tanggal 19 Agustus 2003 dan berkedudukan di Medan, Kampus FK USU. Semenjak berdiri, SCORE bertujuan untuk mewujudkan dan menumbuhkan budaya ilmiah di lingkungan Kampus Fakultas Kedoktean Universitas
Sumatera Utara. SCORE tergabung dalam Badan Analisis dan Pengembangan Ilmiah Nasional Ikatan Senat Mahasiswa Kedokteran Indonesia (BAPIN ISMKI).</p>
<br>
<p style="font-style: italic; text-align: center;">Scripta Manent Verba Volent <br> "Yang tertulis akan abadi, dan yang terkatakan akan binasa"</p>
</div>
</div>
</div>
</div>
Click here for example

Answer 1

Just need to add a metadata in your HTML file like
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
This will adjust your font size in device.

Answer 2

You can use the media queries to get the different sizes fonts to suit the device you are using.
more about media queries

Answer 3

Set .logoHeader div height auto.
.logoHeader{
height: auto;
min-height: 120px;
}
If That's not the problem. you can check Nitheesh's and Al Amin's answer.

Answer 4

just spend some time to play with Viewport-percentage
viewport-percentage values are:
vw (the viewport width)
vh (the viewport height)
vi (1% of the viewport size in the direction of the root element's inline axis)
vb (1% of the viewport size in the direction of the root element's block axis)
vmin (the smaller of vw or vh)
vmax (the larger or vw or vh)
hope your problem will be solve if you use vw like this:
.text {
font-size: 5vw; // OR whatever value you need
}