Habpanel: how to resize font in templates?

Hi

I need help to understand out how to fix one thing:
I use this template from habpanel tutorial: Template widget - tutorial & examples - make your own widget!

<div class="row" ng-repeat="item in itemsInGroup('gOutdoor')">
<div class="col-xs-8 text-right">{{item.name}}</div>
<div class="col-xs-4 text-left" ng-style="{ color:  itemValue(item.name)=='OFF'?'red':'green' }">
 	{{itemValue(item.name)}}   </div>
</div>```


on pc it works well: I like it!


but when I try to use it from smarphone or other devices I realize that the font does not resize properly, it is showed too big... I  should use some proportional system, but how???

I had searched in the forum but I did not find a clear directions on how to do it

Someone can guide me step by step or give me simple information

I DO NOT HAVE ANY HTML KNOWLEDGE .... sorry ...

Ale