Merge pull request #140 from AOT-Technologies/dheepak_local_dev

Fixed mobile view render
bcgov · Feb 13, 2021 · 54ac2e8 · 54ac2e8
2 parents a8659d6 + 5b2d0cf
commit 54ac2e8
Showing 1 changed file with 12 additions and 6 deletions.
diff --git a/appointment-frontend/src/components/appointment/LoginToConfirm.vue b/appointment-frontend/src/components/appointment/LoginToConfirm.vue
@@ -2,7 +2,7 @@
   <v-card-text>
     <v-col justify="center">
       <v-row class="align-row-1 bcsc-btn" v-if="!hideBCServicesCard">
-        <v-col>
+        <v-col class="fill-width">
           <v-btn
             min-width="150"
             large
@@ -17,7 +17,7 @@
             <span>About the BC Services Card</span>
           </a>
         </v-col>
-        <v-col class="align-row-2">
+        <v-col class="align-row-2 fill-width">
           <v-img
             class="login-logo"
             :src="($vuetify.breakpoint.xs) ? require('@/assets/img/bcsc_logo_sm.jpg') : require('@/assets/img/bcsc_logo.jpg')"
@@ -27,7 +27,7 @@
         </v-col>
       </v-row>
       <v-row class="align-row-1 bcsc-btn">
-        <v-col>
+        <v-col class="fill-width">
           <v-btn
           min-width="150"
           large
@@ -42,7 +42,7 @@
           <span>About the BCeID</span>
         </a>
         </v-col>
-        <v-col class="align-row-2">
+        <v-col class="align-row-2 fill-width">
         <v-img
             class="login-logo"
             :src="($vuetify.breakpoint.xs) ? require('@/assets/img/bceid_logo_sm.jpg') : require('@/assets/img/bceid_logo.jpg')"
@@ -55,7 +55,7 @@
         <v-col class="create-bceid">I do not have a BC Services Card or BCeID</v-col>
       </v-row>
       <v-row class="align-row-1 bcsc-btn">
-        <v-col>
+        <v-col class="fill-width">
           <v-btn :href="BCEIDRegistrationURL"
           min-width="150"
           large
@@ -74,7 +74,7 @@
           <span>Privacy Statement</span>
         </a>
         </v-col>
-        <v-col class="align-row-2">
+        <v-col class="align-row-2 fill-width">
         <v-img
             class="login-logo"
             :src="($vuetify.breakpoint.xs) ? require('@/assets/img/bceid_logo_sm.jpg') : require('@/assets/img/bceid_logo.jpg')"
@@ -159,6 +159,9 @@ export default class LoginToConfirm extends Mixins(StepperMixin) {
 .login-logo{
   display: inline-flex;
 }
+.fill-width{
+  min-width: 100%;
+}
 @media (min-width: 400px) {
   .align-row-1{
   text-align: right!important;
@@ -168,5 +171,8 @@ export default class LoginToConfirm extends Mixins(StepperMixin) {
     margin-left: 0;
     margin-right: 0;
   }
+  .fill-width{
+    min-width: unset;
+  }
 }
 </style>