fix 13-inch screen issue (#569)

cornell-dti · Nov 3, 2021 · 228876a · 228876a
1 parent 3d008a8
commit 228876a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/src/assets/constants/scss-variables.ts b/src/assets/constants/scss-variables.ts
@@ -11,4 +11,5 @@ export const smallMediumBreakpoint = '600px';
 export const mediumBreakpoint = '878px';
 export const largeBreakpoint = '976px';
 export const veryLargeBreakpoint = '1347px';
+export const largerBreakpoint = '1407px';
 export const largestBreakpoint = '1455px';
diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss
@@ -49,4 +49,5 @@ $small-medium-breakpoint: 600px;
 $medium-breakpoint: 878px;
 $large-breakpoint: 976px;
 $very-large-breakpoint: 1347px;
+$larger-breakpoint: 1407px;
 $largest-breakpoint: 1455px;
diff --git a/src/components/Semester/SemesterView.vue b/src/components/Semester/SemesterView.vue
@@ -280,7 +280,7 @@ export default defineComponent({
     flex: 1 1 50%;
 
     margin-bottom: 1.5rem;
-    padding: 0 0.75rem;
+    padding: 0 0.25rem;
 
     &--compact {
       flex: 1 1 25%;
@@ -325,6 +325,14 @@ export default defineComponent({
 }
 
 @media only screen and (max-width: $largest-breakpoint) {
+  .semesterView {
+    &-empty--compact {
+      min-width: 33%;
+    }
+  }
+}
+
+@media only screen and (max-width: $larger-breakpoint) {
   .semesterView {
     &-empty--compact {
       min-width: 50%;