diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss
index 5ab1d48fb..09430b3a4 100644
--- a/src/theme/globals.variables.scss
+++ b/src/theme/globals.variables.scss
@@ -79,8 +79,6 @@ $screen-breakpoints: (
     xl: 1200px
 ) !default;
 
-$modal-lateral-width: 360px;
-
 $core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default;
 $core-dd-question-colors: #FFFFFF, #B0C4DE, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default;
 $core-text-hightlight-background-color: lighten($blue, 40%) !default;
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 2c79ec6b5..3181dbb72 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -628,55 +628,31 @@ body.core-iframe-fullscreen ion-router-outlet {
     z-index: 100000 !important;
 }
 
-.core-modal-lateral .modal-wrapper {
-    @include margin-horizontal(16px, null);
-}
+.core-modal-lateral {
+    --ion-safe-area-left: 0px;
+    --ion-safe-area-right: 0px;
 
-@media only screen and (min-height: 400px) and (min-width: #{$modal-lateral-width}) {
-    .core-modal-lateral {
-        --ion-safe-area-left: 0px;
-        --ion-safe-area-right: 0px;
+    .modal-wrapper {
+        @include margin-horizontal(var(--modal-lateral-margin), null);
 
-        .modal-wrapper {
-            position: absolute;
-            @include position(0 !important, 0 !important, 0 !important, unset !important);
-            display: block;
-            height: 100% !important;
-            width: auto;
-            min-width: calc(#{$modal-lateral-width} - 16px);
-            box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
-        }
-        ion-backdrop {
-            visibility: visible;
-        }
+        position: absolute;
+        @include position(0 !important, 0 !important, 0 !important, unset !important);
+        display: block;
+        height: 100% !important;
+        width: calc(100% - var(--modal-lateral-margin));
+        max-width: calc(var(--modal-lateral-max-width));
+        box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+    }
+
+    ion-backdrop {
+        visibility: visible;
     }
 }
 
 @each $breakpoint, $width in $screen-breakpoints {
-    .core-modal-lateral-#{$breakpoint} .modal-wrapper {
-        @include margin-horizontal(16px, null);
+    .core-modal-lateral-#{$breakpoint} {
+        --modal-lateral-max-width: #{$width};
     }
-
-    @media only screen and (min-height: 400px) and (min-width: #{$width}) {
-        .core-modal-lateral-#{$breakpoint} {
-            --ion-safe-area-left: 0px;
-            --ion-safe-area-right: 0px;
-
-            .modal-wrapper {
-                position: absolute;
-                @include position(0 !important, 0 !important, 0 !important, unset !important);
-                display: block;
-                height: 100% !important;
-                width: auto;
-                min-width: #{$width};
-                box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
-            }
-            ion-backdrop {
-                visibility: visible;
-            }
-        }
-    }
-
 }
 
 // Hidden submit button.
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index 5b44db892..99cc6f2a9 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -81,6 +81,9 @@
 
     --list-item-max-width: 768px;
 
+    --modal-lateral-max-width: 320px;
+    --modal-lateral-margin: 56px;
+
     --contrast-background: white;
 
     --ion-text-color: var(--text-color);