1

@@ -295,10 +295,10 @@
     }
 }  
 
-@media (max-width: 600px) {
-    .reservation-container {
-        padding: 2.666667rem 2rem 2.833333rem 2rem;
-    }
+@media (max-width: 700px) {
+  .reservation-container {
+      padding: 2.666667rem 2rem 2.833333rem 2rem;
+  }
 
   .form {
     &-item {
@@ -349,3 +349,28 @@
   }
 }
 
+
+
+@media (max-width: 500px) {
+
+  .date-wrap .calendar-wrap{
+    margin-left: -25px !important;
+  }
+
+  .form {
+    &-item {
+        flex-direction: column;
+        width: 100%;
+
+        .label {
+          margin-bottom: .416667rem;
+          min-width: 100%;
+        }
+    
+        .ipt-wrap {
+          width: 100%;
+
+        }
+    }
+  }
+}
\ No newline at end of file

@@ -3,7 +3,7 @@
     <div class="title" v-if="!(userInfo && userInfo.name)"><u><span class="pointer" @click="toRegisterPage">{{$t('clarms.step1.register')}}</span>/<span class="pointer" @click="toLoginPage">{{$t('clarms.step1.login')}}</span></u>{{$t('clarms.step1.t1')}}</div>
     <div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div>
     <div class="gird-g form default-mt">
-      <div class="pure-u-1 pure-u-md-1-2 form-item">
+      <div class="form-item">
         <div class="label">
           {{$t('clarms.step1.label1')}}
         </div>
@@ -12,7 +12,7 @@
         </div>
       </div>
 
-      <div class="pure-u-1 pure-u-md-1-2 form-item">
+      <div class="form-item">
         <div class="label">
           {{$t('clarms.step1.label2')}}
         </div>
@@ -21,7 +21,7 @@
         </div>
       </div>
 
-      <div class="pure-u-1 pure-u-md-1-2 form-item">
+      <div class="form-item">
         <div class="label">
           {{$t('clarms.step1.label3')}}
         </div>
@@ -33,7 +33,7 @@
         </div>
       </div>
 
-      <div class="pure-u-1 pure-u-md-1-2 form-item">
+      <div class="form-item">
         <div class="label">
           {{$t('clarms.step1.label4')}}
         </div>
@@ -42,7 +42,7 @@
         </div>
       </div>
 
-      <div class="pure-u-1 pure-u-md-1-2 form-item">
+      <div class="form-item">
         <div class="label">
           {{$t('clarms.step1.label5')}}
         </div>

@@ -20,8 +20,8 @@
     margin-left: 0px;
 
     @extend .bb;
-    max-width: 450px;
-    min-width: 350px;
+    max-width: 37.5rem;
+    min-width: 25rem;
     height: 320px;
     border-radius: $borderRadius;
     background-color: wheat;