optimize OtaWizard for screen space

src/app/app.scss

@@ -33,3 +33,22 @@
 ion-content {
   contain: size style;
 }
+
+// adds classes hidden-* for each responsive size that hides elements for this screen size only.
+$breakpoints-keys: map-keys($grid-breakpoints);
+$breakpoints-values: map-values($grid-breakpoints);
+@for $i from 1 to length($breakpoints-keys)+1 {
+  @if $i < length($breakpoints-keys) {
+    .hidden-#{nth($breakpoints-keys, $i)} {
+      @media (min-width: nth($breakpoints-values, $i)) and (max-width: #{nth($breakpoints-values, $i+1) - 1}) {
+        display: none !important;
+      }
+    }
+  } @else {
+    .hidden-#{nth($breakpoints-keys, $i)} {
+      @media (min-width: nth($breakpoints-values, $i)) {
+        display: none !important;
+      }
+    }
+  }
+}

src/pages/ota-wizard/ota-wizard.html

@@ -103,7 +103,7 @@
 
         <ion-row id="wifi-automatic" *ngIf="state.wifiSelection != 'manual'">
           <ion-col col-12 col-md-6>
-            <ion-icon name="wifi" style="font-size: 160px"></ion-icon>
+            <ion-icon class="hidden-xs hidden-sm" name="wifi" style="font-size: 160px"></ion-icon>
             <h2 translate>OTAWIZ.WIFI.AUTO.TITLE</h2>
             <ul style="text-align: left">
               <li translate>OTAWIZ.WIFI.AUTO.TEXT1</li>

src/pages/ota-wizard/ota-wizard.scss

@@ -21,9 +21,9 @@ page-ota-wizard {
     }
 
     p, ul, ol {
-      padding: 0 20px;
-      font-size: 16px;
-      line-height: 1.5;
+      padding: 0 16px;
+      font-size: 15px;
+      line-height: 1.4;
       color: #60646B;
 
       b {
@@ -35,7 +35,7 @@ page-ota-wizard {
     ul, ol {
       margin-left: 4%;
       li {
-        padding-bottom: 8px;
+        padding-bottom: 6px;
       }
     }
     ul {