final changes to resposiveness - i phone x landscape font too big and could use some css

Author: iamalx

src/pages/wizard/wizard.html

@@ -83,7 +83,7 @@ <h1 class="h1">Timeline</h1>
               <h1 class="h1">Profile</h1>
             </ion-list-header>
             <p class='h2'>
-              You can see your information any time or update it from your profile page.
+             In your profile page you can see your information or update it at any time .
             </p>
           </ion-list>
           <img class= 'demo-img'src='../../assets/imgs/profile.png'>

src/pages/wizard/wizard.scss

@@ -73,12 +73,12 @@ page-wizard {
         padding: 5px;
         margin: 0px !important;
         top: -5px;
-       
     }
     .h1{
         font-weight: bold;
         font-size: 20px;
         margin-right: 5px;
+        white-space: normal;
     } 
     .h2 {
         white-space: normal;
@@ -94,6 +94,7 @@ page-wizard {
     }
     .demo-img{
         width: 60%;
+
     }
     .select-placeholder, .select-text{
         font-size: 20px;
@@ -200,27 +201,26 @@ page-wizard {
             height: 55px;
             margin: auto
         }
-        @media screen and (orientation: portrait) {
-            .h1 {
-                 font-size: 40px;
-             }
-             .h2 {
-                 font-size: 28px;
-             }   
-        }
-    }
-    @media screen and (min-width: 1024px) {
         .h1 {
             font-size: 40px;
         }
         .h2 {
             font-size: 28px;
-        }
+        }   
+
+    }
+    @media screen and (min-width: 1024px) {
         @media screen and(orientation: portrait){
             .button1{
                 width: 230px;
                 height: 70px;
             }
+            .h1 {
+                font-size: 50px;
+            }
+            .h2 {
+                font-size: 38px;
+            }
         } 
     }
 
@@ -240,15 +240,6 @@ page-wizard {
         }
     }
 
-    // @media screen and (min-width: 700px) and (orientation: portrait){
-    //     .h1 {
-    //         font-size: 40px;
-    //     }
-    //     .h2 {
-    //         font-size: 28px;
-    //     }
-    // }
-
     @media screen and (orientation:landscape) {
         .demo-slide .slide-zoom {
             display: flex;
@@ -270,6 +261,7 @@ page-wizard {
         }
         .demo-img{
             width: 37%;
+            margin-left: 2.2vw;
         } 
         .top-question {
             position: relative;
@@ -282,6 +274,12 @@ page-wizard {
                 height: 70px;
                 font-size: 30px;
             }
+            .h1 {
+                font-size: 50px;
+            }
+            .h2 {
+                font-size: 38px;
+            }
        }   
        @media screen and (max-width: 850px) {
             ion-badge{
@@ -293,7 +291,10 @@ page-wizard {
                 width: 80%;
             }
             .demo-img{
-                width: 10%;
+                width: 25%;
+            }
+            .demo-header {
+                width: 55%;
             }
             .question-header{
                 margin: 0px;