Responsive font size

[krkmzugur]

Hello there,

I’m practicing chess clock. But the font does not behave according to the device. I’ll be happy if you can help me.

style.css

.tx {
text-align: center;
vertical-align: middle;
position: relative;
top: 50%;
transform: translateY(-50%);
font-size:30vw !important;
}

#white {
width:100%;
height: 40% !important;
background-color:#EF473A;
position: absolute;
top: 0;
}

#black {
width:100%;
height: 40% !important;
background-color:#886AEA;
position: absolute;
bottom: 0;
}

index.html

<ion-content>
   
    <div ng-disabled="myTimer1==0 || myTimer2==0 " id="white"  ng-click="Timer1()">
      <div class="tx">{{ Timer1Clock }}</div>
    </div>
    
    <div ng-disabled="myTimer1==0 || myTimer2==0" id="black" ng-click="Timer2()">
      <div class="tx">{{ Timer2Clock }}</div>
    </div>

  </ion-content>

[nirav_ionic]

you can try EM & REM

https://zellwk.com/blog/rem-vs-em/

[krkmzugur]

Thank you man. It’s works.

[nirav_ionic]

always welcome

please mark as solution so easily identified by other

solution

.

[jamesharvey]

em works… media queries will work as well.