improve responsiveness

src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.html

@@ -73,14 +73,14 @@
         <div class="overflow-y-auto">
           <div class="middle-content">
             <div *ngIf="loadedEvent.workflowInstanceDataFields.ParticipantsList">
-              <h5>Intervenientes</h5>
+              <h5 class="font-17-rem">Intervenientes</h5>
               <div *ngFor="let att of loadedEvent.workflowInstanceDataFields.ParticipantsList">
                 <ion-label>{{att.Name}}</ion-label>
               </div>
               <div class="line"></div>
             </div>
             <div *ngIf="loadedEvent.workflowInstanceDataFields.Body">
-              <h5>Detalhes</h5>
+              <h5 class="font-17-rem">Detalhes</h5>
               <ion-item lines="none" class="ion-no-margin ion-no-padding">
                 <pre class="width-100 text">{{loadedEvent.workflowInstanceDataFields.Body }} </pre>
               </ion-item>
@@ -89,7 +89,7 @@
           </div>
           <div *ngIf="loadedEvent.Documents" class="bottom-content width-100">
             <ion-list>
-              <h5>Documentos Anexados</h5>
+              <h5 class="font-17-rem">Documentos Anexados</h5>
               <ion-item class="ion-no-margin ion-no-padding cursor-pointer"
               *ngFor="let attachment of loadedEvent.Documents"
               (click)="viewDocument(attachment.DocId, attachment)">

src/app/pages/gabinete-digital/event-list/approve-event/approve-event.page.scss

@@ -16,21 +16,21 @@ ion-menu{
 }
 .header-icon-left{
   width: 36px;
-  font-size: 33px;
+  font-size: rem(33);
   color: #42b9fe;
   float: left;
 }
 .header-title{
   font-family: Roboto;
-  font-size: 25px;
+  font-size: rem(25);
   margin: 0 5px 0 5px;
   padding: 0;
   color:#000;
   float: left;
 }
 .header-icon-right{
-  width: 45px;
-  font-size: 45px;
+  width: rem(45);
+  font-size: rem(45);
   float: left;
 }
 
@@ -44,7 +44,7 @@ ion-menu{
 
   .upper-content{
     margin-left: 40px;
-    font-size: 18px;
+    font-size: rem(18);
 
     .content-location{
       margin-top: 0px !important;
@@ -79,12 +79,12 @@ ion-menu{
         --color:#061b52;
     }
     .content-details p{
-        font-size: 16px;
+        font-size: rem(16);
     }
   }
   .middle-conten{
     .middle-content h3, .middle-content p{
-      font-size: 16px;
+      font-size: rem(16);
     }
   }
 
@@ -92,11 +92,11 @@ ion-menu{
     margin: 0 auto;
 
     .bottom-content h3{
-      font-size: 16px;
+      font-size: rem(16);
       margin: 0 0 0 10px;
     }
     .attach-document{
-      font-size: 15px;
+      font-size: rem(15);
       color: var(--title-text-color);
       margin: 5px 5px 5px 10px;
       padding: 5px;
@@ -104,23 +104,23 @@ ion-menu{
     }
     .attach-icon{
       width: 37px;
-      font-size: 35px;
+      font-size: rem(35);
       float: left;
     }
     .attach-title-item{
       width: 100%;
-      font-size: 15px;
+      font-size: rem(15);
       color:var(--title-text-color);
     }
     /* SPAN */
     .span-left{
       float: left;
-      font-size: 15x;
+      font-size: rem(15);
     }
     .span-right{
     text-align: right;
     float: right;
-    font-size: 13px;
+    font-size: rem(13);
     }
   }
 }
@@ -141,7 +141,7 @@ ion-menu{
 
     .btn-ok, .btn-cancel, .btn-delete{
       height: auto !important;
-      font-size: 16px !important;
+      font-size: rem(16) !important;
       width: 100% !important;
       margin-bottom: 10px !important;
       padding: 15px !important;