fixed h1 and h1 tags for portrait, lanscape, mobile and ipad view

Author: iamalx

src/pages/wizard/wizard.html

@@ -90,10 +90,10 @@ <h1 class="h1">Timeline</h1>
     </ion-slide>
 
     <ion-slide class='quest-slide'>
-      <div class='top-non-flex'>
-        <ion-list class="non-flex-header" >
-          <ion-list-header>
-            <h1 class="h1">Questionnaire 2/3</h1>
+      <div class='top-question'>
+        <ion-list class="question-header" >
+          <ion-list-header class='inner-question-header' >
+            <h1 class="h1">Questionnaire 1/3</h1> 
           </ion-list-header>
           <p class='h2'>Tell us about yourself</p>
         </ion-list>

src/pages/wizard/wizard.scss

@@ -52,21 +52,21 @@ page-wizard {
         font-size: 2.5vw;
         top: 10vw;
     }
-    .top-non-flex{
+    .top-question{
         position: relative;
         //display: block;
         // width: 70%;
         margin: auto;
-        font-size: 2.5vw;
+      //  font-size: 2.5vw;
         top: 10vw;
     }
     .h1{
         font-weight: bold;
-        font-size: 3.5vw;
+        font-size: 20px;
     } 
     .h2 {
         white-space: normal;
-        font-size: 25px;
+        font-size: 20px;
         width: 80%;
         margin: 15px auto auto auto;
         top: 20px;
@@ -86,7 +86,6 @@ page-wizard {
        // margin-top: 10px auto auto auto;
         display: inline;
         box-shadow: 0px 1px 66px -4px rgba(0,0,0,0.68);
-        
     }
     .date {
         float: left;
@@ -131,12 +130,10 @@ page-wizard {
     //   outline: none;
     //   border:1px solid #cccccc
     // }
-       
-    .non-flex-header {
+   
+    .question-header {
         position: relative;
-      //  margin-top: 100px;
     } 
-    
     .q-group {
         padding: 20px auto;
        // margin: 20px auto;
@@ -184,7 +181,34 @@ page-wizard {
             width: 20vw;
          }
         }
+
+        @media screen and (min-width: 1000px) {
+            .h1 {
+               font-size: 40px;
+           }
+           .h2 {
+               font-size: 28px;
+           }
+           @media screen and (orientation: landscape) {
+            .question-header .h1 {
+               font-size: 35px;
+             } 
+             .question-header {
+                 margin-bottom: 10px;
+             }
+           }
+       }
+       @media screen and (min-width: 700px) and (orientation: portrait){
+        .h1 {
+            font-size: 40px;
+        }
+        .h2 {
+            font-size: 28px;
+        }
+       }
+
     @media screen and (orientation:landscape) { 
+        
         .demo-slide {
             align-items: center;
          }
@@ -218,17 +242,36 @@ page-wizard {
         #timeline {
             width: 35%;
         }
+        // .question-header {
+        //    display: flex;
+        //    justify-content: space-around;
+        //   //  margin-top: 100px;
+        // }      
+        .question-header {
+        //    position: relative;
+        //    top: 1vh;
+        }
+        .top-question {
+            position: relative;
+            top: 60px;
+        }
+        
+        .top-question .h1 {
+            margin: 0px;
+            font-size: 25px;
+            
+        }
+        .top-question .h2 {
+            margin: 0px auto 0px auto;
+            font-size: 20px;
+        }
         .buttons {
             margin-top: 5vw; 
          }
          .button1 {
              height: 5vw;
          }
-        //  @media screen and (orientation: portrait) {
-        //     .simple-header{
-        //       width: 60%;
-        //     } 
-        //  }
+      
     }
 
 }