CODEWITHSUNDEEP
htmlcss
Raynald Pradigo
Raynald Pradigo

Reputation: 3

How to resize texts in all devices?

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

Upvotes: 0

Views: 358

Answers (4)

Shafikul Islam
Shafikul Islam

Reputation: 359

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.

Upvotes: 1

alamin
alamin

Reputation: 84

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
}

Upvotes: 0

sinthu225
sinthu225

Reputation: 311

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

more about media queries

Upvotes: 1

Nitheesh
Nitheesh

Reputation: 19986

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.

Upvotes: 1

Related Questions