diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 1abfc3d42..2fa5f61ea 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -164,7 +164,7 @@ export default {
                 @include media-breakpoint-up(md) {
                     box-shadow: none;
                     border-radius: 0;
-                    height: 100vh;
+                    //height: 100vh;
                     margin: 0 auto;
                 }
                 .modal-body {
@@ -195,6 +195,10 @@ export default {
             button {
                 margin: 0;
             }
+            @include media-breakpoint-up(md) {
+                position: relative;
+                background-color: transparent;
+            }
         }
     }
     &.show .modal-dialog {
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index a07993b62..ca49c9025 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -60,7 +60,7 @@
                 </div>
             </div>
             <div class="row justify-content-md-center appointment-type">
-                <div class="col-md-6">
+                <div class="col-md-6 col-xxl-4">
                     <appointmentTypeQuestion
                         v-model="selectedAppointmentType"
                         v-show="isAppointmentTypeDisplayed"
@@ -496,20 +496,7 @@ export default {
 </script>
 
 <style lang="scss">
-.appointment-type {
-    @include media-breakpoint-up(md) {
-        .col {
-            flex: 0 0 auto;
-            width: 49.33333333%;
-        }
-    }
-    @include media-breakpoint-up(xl) {
-        .col {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-        }
-    }
-}
+
 .question-text {
     & > span {
         text-align: center;