improve responsiveness

src/app/pages/events/events.page.scss

@@ -46,7 +46,7 @@ ion-toolbar{
     border: 0!important;
 
     .div-search{
-      font-size: 45px;
+      font-size: rem(45);
       float: left;
       margin: 0 0 0 10px
     }
@@ -60,7 +60,7 @@ ion-toolbar{
       width: 100%;
     }
     .div-profile{
-      font-size: 45px;
+      font-size: rem(45);
       float: right;
       margin-right: 10px;
     }
@@ -75,14 +75,14 @@ ion-toolbar{
   }
   .header-large{
     font-family: Arial, Helvetica, sans-serif;
-    font-size: 12.5pt;
+    font-size: rem(17);
     /* font-weight: 600; */
     background: transparent;
     color: #ffffff;
   }
   .header-xsmall{
     font-family: Arial, Helvetica, sans-serif;
-    font-size: 9.7pt;
+    font-size: rem(13);
     font-weight: bold;
     padding-bottom: 3.5px;
     margin-bottom: 3.5px;
@@ -90,16 +90,16 @@ ion-toolbar{
     background: transparent;
   }
   .header-medium{
-    font-size: 12pt;
+    font-size: rem(16);
     text-align: left;
     font-family: roboto;
     background: transparent;
     margin-right: 5px;
-    line-height: 25px;
+    line-height: rem(25);
   }
 
   .p-small{
-    font-size: 13pt;
+    font-size: rem(17);
     margin-top: 13px;
     color: var(--header-tab-text-white);
     margin-right: 25px !important;
@@ -109,7 +109,7 @@ ion-toolbar{
 
   /* CONTENT */
   .item-list-small{
-      font-size: 14px;
+      font-size: rem(14);
       overflow: auto;
     }
     .ion-item-class{
@@ -150,12 +150,12 @@ ion-toolbar{
     .div-up h3{
       margin: 0;
       padding: 0;
-      font-size: 17px;
+      font-size: rem(17);
       width: 100%;
     }
     .div-icon{
       width: 10%;
-      font-size: 22px;
+      font-size: rem(22);
       float: left;
       color: #808080;
     }
@@ -177,11 +177,11 @@ ion-toolbar{
       padding: 0 0 0 12px;
     }
     .div-content-Oficial h3, .div-content-Pessoal h3{
-      font-size: 14pt;
+      font-size: rem(19);
       /* border: 1px solid red; */
     }
     .div-content-Oficial p, .div-content-Pessoal p{
-      font-size: 12pt;
+      font-size: rem(16);
       color: rgb(94, 92, 92);
       padding: 0 !important;
       margin: 0 !important;
@@ -199,7 +199,7 @@ ion-toolbar{
       text-align: center;
       display: block;
       color: var(--subtitle-text-color);
-      font-size: 16px;
+      font-size: rem(16);
       margin: 0 auto;
       min-height: 19px;
     }
@@ -220,7 +220,7 @@ ion-toolbar{
     }
     .ion-icon-attach{
       color: #666666;
-      font-size: 20px;
+      font-size: rem(20);
     }
     /* NEW CSS FOR TOGGLE BUTTON */
     .toggleBox{
@@ -247,7 +247,7 @@ ion-toolbar{
       position: absolute;
       content: "";
       left: 0;
-      width: 30px;
+      width: rem(30);
       height: 30px;
       background: #fff;
       border-radius: 50%;
@@ -270,7 +270,7 @@ ion-toolbar{
       position: absolute;
       color: #fff;
       font-weight: 600;
-      font-size: 12px;
+      font-size: rem(12);
       pointer-events: none;
     }
     .onbtn{
@@ -298,11 +298,11 @@ ion-toolbar{
 .event-number{
   color: var(--header-tab-text-white);
   font-family: Roboto;
-  font-size: 15px;
+  font-size: rem(15);
 
   bold{
     font-family: Roboto;
-    font-size: 25px;
+    font-size: rem(25);
     text-align: right;
     color: var(--white);
   }
@@ -333,7 +333,7 @@ ion-toolbar{
   .meeting-description {
     margin-top: 2px;
     font-family: Roboto;
-    font-size: 15px;
+    font-size: rem(15);
     color: var(--header-tab-text-white);
   }
 }
@@ -373,19 +373,19 @@ ion-toolbar{
 
       .icon{
         color: #e8e8e8;
-        height: 35px;
-        width: 35px;
+        height: rem(35);
+        width: rem(35);
         margin-right: 10px;
       }
       .text{
         font-family: Roboto;
-        font-size: 20px;
+        font-size: rem(20);
         color: black;
       }
     }
     .icon-next {
       color: #e8e8e8;
-      font-size: 35px;
+      font-size: rem(35);
     }
     .icon-next-color {
       color: #e8e8e8;
@@ -427,18 +427,18 @@ ion-toolbar{
           .time-start{
             color: #797979 !important;
             font-family: Roboto;
-            font-size: 13px;
+            font-size: rem(13);
           }
           .time-end{
             color: #797979 !important;
             font-family: Roboto;
-            font-size: 13px;
+            font-size: rem(13);
           }
         }
         .schedule-date{
           margin-right: 10px;
           color: #797979 !important;
-          font-size: 13px;
+          font-size: rem(13);
         }
         .schedule-details{
           display: flex;
@@ -449,7 +449,7 @@ ion-toolbar{
           align-items: baseline;
           .location{
             font-family: Roboto;
-            font-size: 15px;
+            font-size: rem(15);
             color: black;
             min-height: 19px;
             width: 100%;
@@ -458,7 +458,7 @@ ion-toolbar{
           .description{
             width: 100%;
             font-family: Roboto;
-            font-size: 13px;
+            font-size: rem(13);
             font-weight: bold;
             //color: #0d89d1;
             color: var(--title-text-color)
@@ -471,7 +471,7 @@ ion-toolbar{
         }
         .color{
           width: 5px;
-          height: 40px;
+          height: rem(40);
           border-top-right-radius: 5px;
           border-bottom-right-radius: 5px;
           background-color: #f05d5e;
@@ -488,7 +488,7 @@ ion-toolbar{
   .resume{
     .title{
       font-family: Roboto;
-      font-size: 15px;
+      font-size: rem(15);
       font-weight: 500;
       color: #797979;
       margin-bottom: 5px;
@@ -496,7 +496,7 @@ ion-toolbar{
     }
     .event-num, .first-event-time{
       font-family: Roboto;
-      font-size: 15px;
+      font-size: rem(15);
       display: block;
       color: black;
     }
@@ -621,7 +621,7 @@ ion-title{
       line-height: 15px;
     }
     span {
-      font-size: 15px;
+      font-size: rem(15);
       font-weight: 600;
     }
   }