diff --git a/core/src/theme-ionic/test/dear-designer-input/index.html b/core/src/theme-ionic/test/dear-designer-input/index.html
index 028f4ba357..2290912ff1 100644
--- a/core/src/theme-ionic/test/dear-designer-input/index.html
+++ b/core/src/theme-ionic/test/dear-designer-input/index.html
@@ -52,107 +52,108 @@
           </ion-row>
           <ion-row>
 
-            <ion-col></ion-col>
+            <ion-col ></ion-col>
             <ion-col size="10">
               <h2 class="title">Input types:</h2>
             </ion-col>
-            <ion-col></ion-col>
+            <ion-col ></ion-col>
 
           </ion-row>
           
           <ion-row>
 
-            <ion-col></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
             <ion-col size="5" class="center">
               <h6>Text</h6>
             </ion-col>
             <ion-col size="5" class="center">
               <h6>Number</h6>
             </ion-col>
-            <ion-col></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
 
           </ion-row>
 
           <ion-row>
 
-            <ion-col></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
             <ion-col size="5" class="center padding-preview-input">
               <ion-input fill="outline" label="Name" type="text"></ion-input>
             </ion-col>
             <ion-col size="5" class="center padding-preview-input">
               <ion-input fill="outline" label="Number" type="number"></ion-input>
             </ion-col>
-            <ion-col></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
 
           </ion-row>
 
           <ion-row>
 
-            <ion-col></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
             <ion-col size="5" class="center">
               <h6>Email</h6>
             </ion-col>
             <ion-col size="5" class="center">
               <h6>Phone number</h6>
             </ion-col>
-            <ion-col></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
 
           </ion-row>
 
           <ion-row>
 
-            <ion-col></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
             <ion-col size="5" class="center padding-preview-input">
               <ion-input fill="outline" label="Email" type="email"></ion-input>
             </ion-col>
             <ion-col size="5" class="center padding-preview-input">
               <ion-input fill="outline" label="Phone Number" type="tel"></ion-input>
             </ion-col>
-            <ion-col></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
 
           </ion-row>
 
           <ion-row>
 
-            <ion-col></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
             <ion-col size="5" class="center">
               <h6>Date</h6>
             </ion-col>
             <ion-col size="5" class="center">
               <h6>Search</h6>
             </ion-col>
-            <ion-col></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
 
           </ion-row>
 
           <ion-row>
 
-            <ion-col></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
             <ion-col size="5" class="center padding-preview-input">
               <ion-input fill="outline" label="Date" type="datetime-local"></ion-input>
             </ion-col>
             <ion-col size="5" class="center padding-preview-input">
               <ion-input fill="outline" label="Search" type="search"></ion-input>
             </ion-col>
-            <ion-col></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
 
           </ion-row>
 
           <ion-row>
 
-            <ion-col></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
             <ion-col size="5" class="center">
               <h6>Password</h6>
             </ion-col>
             <ion-col size="5" class="center">
+              <h6> </h6>
             </ion-col>
-            <ion-col></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
 
           </ion-row>
 
           <ion-row>
 
-            <ion-col></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
             <ion-col size="5" class="center padding-preview-input">
               <ion-input fill="outline" label="Password" type="password">
                  <ion-input-password-toggle slot="end"></ion-input-password-toggle>
@@ -160,7 +161,7 @@
             </ion-col>
             <ion-col size="5" class="center padding-preview-input">
             </ion-col>
-            <ion-col></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
 
           </ion-row>
 
@@ -178,7 +179,7 @@
 
           <ion-row>
 
-            <ion-col size="1"></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
             <ion-col class="center">
               <h6>md</h6>
             </ion-col>
@@ -188,13 +189,13 @@
             <ion-col class="center">
               <h6>xl</h6>
             </ion-col>
-            <ion-col size="1"></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
 
           </ion-row>
 
           <ion-row>
 
-            <ion-col size="1"></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
             <ion-col class="center padding-preview-input2">
               <ion-input fill="outline" label="Name" type="text"></ion-input>
             </ion-col>
@@ -204,7 +205,7 @@
             <ion-col class="center padding-preview-input2">
               <ion-input fill="outline" size="xlarge" label="Name" type="text"></ion-input>
             </ion-col>
-            <ion-col size="1"></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
 
           </ion-row>
 
@@ -222,7 +223,7 @@
 
           <ion-row>
 
-            <ion-col size="1"></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
             <ion-col class="center">
               <h6>Round</h6>
             </ion-col>
@@ -232,13 +233,13 @@
             <ion-col class="center">
               <h6>Rectangular</h6>
             </ion-col>
-            <ion-col size="1"></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
 
           </ion-row>
 
           <ion-row>
 
-            <ion-col size="1"></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
             <ion-col class="center padding-preview-input2">
               <ion-input fill="outline" label="Name" type="text"></ion-input>
             </ion-col>
@@ -248,7 +249,7 @@
             <ion-col class="center padding-preview-input2">
               <ion-input fill="outline" shape="rectangular" label="Name" type="text"></ion-input>
             </ion-col>
-            <ion-col size="1"></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
 
           </ion-row>
 
@@ -266,13 +267,13 @@
 
           <ion-row>
 
-            <ion-col></ion-col>
+            <ion-col size="1"></ion-col>
             <ion-col size="5" class="center">
               <ion-input clear-input="true" fill="outline" label="Name" type="text"></ion-input>
             </ion-col>
             <ion-col size="5" class="center padding-preview-input">
             </ion-col>
-            <ion-col></ion-col>
+            <ion-col size="1"></ion-col>
 
           </ion-row>
 
@@ -302,7 +303,7 @@
 
           <ion-row>
 
-            <ion-col></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
             <ion-col size="5" class="center padding-preview-input">
               <ion-input placeholder="Placeholder" clear-input="true" fill="outline" label="Name" type="text">
                 <ion-icon slot="start" src="/src/theme-ionic/test/assets/lock.svg" aria-hidden="true"></ion-icon>
@@ -313,7 +314,7 @@
                 <ion-icon slot="end" src="/src/theme-ionic/test/assets/check-circle.svg" aria-hidden="true"></ion-icon>
               </ion-input>
             </ion-col>
-            <ion-col></ion-col>
+            <ion-col class="hide-mobile" size="1"></ion-col>
 
           </ion-row>
 
@@ -330,14 +331,14 @@
 
           <ion-row>
 
-            <ion-col></ion-col>
+            <ion-col size="1"></ion-col>
             <ion-col size="5" class="center">
               <ion-input placeholder="Placeholder" helper-text="Helper Text" clear-input="true" fill="outline" label="Name" type="text">
                
               </ion-input>
             </ion-col>
             <ion-col size="5" class="center padding-preview-input"></ion-col>
-            <ion-col></ion-col>
+            <ion-col size="1"></ion-col>
 
           </ion-row>
 
@@ -354,7 +355,7 @@
 
           <ion-row>
 
-            <ion-col></ion-col>
+            <ion-col size="1"></ion-col>
             <ion-col size="5" class="center">
               <ion-input
               placeholder="Placeholder" 
@@ -365,7 +366,7 @@
             ></ion-input>
             </ion-col>
             <ion-col size="5" class="center padding-preview-input"></ion-col>
-            <ion-col></ion-col>
+            <ion-col size="1"></ion-col>
 
           </ion-row>
 
@@ -382,7 +383,7 @@
 
           <ion-row>
 
-            <ion-col></ion-col>
+            <ion-col size="1"></ion-col>
             <ion-col size="5" class="center">
               <ion-input
               placeholder="Placeholder" 
@@ -395,7 +396,7 @@
             ></ion-input>
             </ion-col>
             <ion-col size="5" class="center padding-preview-input"></ion-col>
-            <ion-col></ion-col>
+            <ion-col size="1"></ion-col>
 
           </ion-row>
 
@@ -444,11 +445,11 @@
   }
 
   ion-card.preview ion-input{
-    width: 400px;
+    width: 300px;
   }
 
   .padding-preview-input{
-    padding:0px 70px 70px 70px;
+    padding:0px 70px 70px 70px
   }
 
   .padding-preview-input2{
@@ -478,4 +479,25 @@
     margin-bottom: 15px;
     line-height: 150%;
   }
+
+  @media only screen and (max-width: 768px) {
+    /* For mobile phones: */
+    ion-col[size="1"].hide-mobile {
+      display:none;
+    }
+
+    ion-col[size="5"] {
+      width: calc(calc(6 / var(--ion-grid-columns, 12))* 100%) !important;
+      max-width: calc(calc(6 / var(--ion-grid-columns, 12))* 100%) !important;
+      flex: 0 0 calc(calc(6 / var(--ion-grid-columns, 12))* 100%) !important;
+    }
+
+    .padding-preview-input{
+      padding:0px 20px 20px 20px
+    }
+
+    .padding-preview-input2{
+      padding:0px 20px 20px 20px;
+    }
+  }
 </style>
\ No newline at end of file