diff --git a/src/app/degree-planner/course-search/course-search.component.html b/src/app/degree-planner/course-search/course-search.component.html
index 64eab6413bab26793e15bec1df11077dfa59b6a1..0df0024c7cdc0d86a1bdd1b50edb2235bd863f5d 100644
--- a/src/app/degree-planner/course-search/course-search.component.html
+++ b/src/app/degree-planner/course-search/course-search.component.html
@@ -45,6 +45,7 @@
           <div
             class="course-wrapper"
             cdkDrag
+            [cdkDragDisabled]="mobileView.matches"
             [cdkDragData]="course"
             *ngFor="let course of queriedCourses"
           >
diff --git a/src/app/degree-planner/course-search/course-search.component.ts b/src/app/degree-planner/course-search/course-search.component.ts
index 743abd9ed63223c4f092b6be58e15c89cd97a951..28f9d002e36d917f216384d10426c47bf4cac438 100644
--- a/src/app/degree-planner/course-search/course-search.component.ts
+++ b/src/app/degree-planner/course-search/course-search.component.ts
@@ -18,6 +18,7 @@ import { MatSnackBar } from '@angular/material';
 // Data modles
 import { Course, SubjectMapping } from '@app/core/models/course';
 import { TermCode } from '@app/core/models/termcode';
+import { MediaMatcher } from '@angular/cdk/layout';
 
 @Component({
   selector: 'cse-course-search',
@@ -46,13 +47,17 @@ export class CourseSearchComponent implements OnInit, OnDestroy {
 
   public termSubscription: Subscription;
   public searchOpenSubscribe: Subscription;
+  public mobileView: MediaQueryList;
 
   constructor(
     private store: Store<GlobalState>,
     private fb: FormBuilder,
     private api: DegreePlannerApiService,
     private snackBar: MatSnackBar,
-  ) {}
+    mediaMatcher: MediaMatcher,
+  ) {
+    this.mobileView = mediaMatcher.matchMedia('(max-width: 900px)');
+  }
 
   public ngOnInit(): void {
     // Internal values used to manage loading state
diff --git a/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.html b/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.html
index dc037d569d93bdb55346d77cf1bf0010f98024eb..f7c197634a852d748a852c48af2638ef5c8589c5 100644
--- a/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.html
+++ b/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.html
@@ -6,7 +6,12 @@
     [cdkDropListData]="courses$ | async"
     [cdkDropListConnectedTo]="dropZoneIds$ | async"
     (cdkDropListDropped)="drop($event)">
-    <div class="course-wrapper" *ngFor="let course of courses$ | async" cdkDrag [cdkDragData]="course">
+    <div
+      class="course-wrapper"
+      *ngFor="let course of courses$ | async"
+      cdkDrag
+      [cdkDragDisabled]="mobileView.matches"
+      [cdkDragData]="course">
       <div class="course-wrapper-inner">
         <cse-course-item [course]="course" type="saved" class="course-favorite"></cse-course-item>
       </div>
diff --git a/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.ts b/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.ts
index 362f1d999247d0c3c111a4311811e8949f645c51..8c52be1a36fbe234d89cea368ee85d2d45fdd915 100644
--- a/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.ts
+++ b/src/app/degree-planner/saved-for-later-container/saved-for-later-container.component.ts
@@ -15,6 +15,7 @@ import {
 import * as selectors from '@app/degree-planner/store/selectors';
 import { distinctUntilChanged } from 'rxjs/operators';
 import { TermCode } from '@app/core/models/termcode';
+import { MediaMatcher } from '@angular/cdk/layout';
 
 @Component({
   selector: 'cse-saved-for-later-container',
@@ -24,8 +25,14 @@ import { TermCode } from '@app/core/models/termcode';
 export class SavedForLaterContainerComponent implements OnInit {
   public courses$: Observable<SavedForLaterCourse[]>;
   public dropZoneIds$: Observable<string[]>;
+  public mobileView: MediaQueryList;
 
-  constructor(private store: Store<{ degreePlanner: DegreePlannerState }>) {}
+  constructor(
+    private store: Store<{ degreePlanner: DegreePlannerState }>,
+    mediaMatcher: MediaMatcher,
+  ) {
+    this.mobileView = mediaMatcher.matchMedia('(max-width: 900px)');
+  }
 
   public ngOnInit() {
     this.dropZoneIds$ = this.store.pipe(
diff --git a/src/app/degree-planner/term-container/term-container.component.html b/src/app/degree-planner/term-container/term-container.component.html
index 3dd3e6142e7f4220618e28183b29900eaa32e54f..252e5ea13d1976dd59092af6fccb42e915f7b34d 100644
--- a/src/app/degree-planner/term-container/term-container.component.html
+++ b/src/app/degree-planner/term-container/term-container.component.html
@@ -39,6 +39,7 @@
             <div
               cdkDrag
               [cdkDragData]="course"
+              [cdkDragDisabled]="mobileView.matches"
               class="course-wrapper"
               *ngFor="let course of plannedCourses"
             >
diff --git a/src/app/degree-planner/term-container/term-container.component.ts b/src/app/degree-planner/term-container/term-container.component.ts
index 071bfa046e28f9c0a957e5c7b20caa4e565953e1..18a7003db1645ae3323145e5b51632cae9fb657c 100644
--- a/src/app/degree-planner/term-container/term-container.component.ts
+++ b/src/app/degree-planner/term-container/term-container.component.ts
@@ -28,6 +28,7 @@ import { TermCode } from '@app/core/models/termcode';
 import { ConfirmDialogComponent } from '@app/shared/dialogs/confirm-dialog/confirm-dialog.component';
 import { maybeQueueResolutionOfComponentResources } from '@angular/core/src/metadata/resource_loading';
 import { WeekDay } from '@angular/common';
+import { MediaMatcher } from '@angular/cdk/layout';
 const isntUndefined = <T>(thing: T | undefined): thing is T => {
   return thing !== undefined;
 };
@@ -55,10 +56,15 @@ export class TermContainerComponent implements OnInit, OnDestroy {
   public enrolledCredits: number;
   public visibleCredits: 'enrolled' | 'planned';
   public courseNotOfferedInTerm: Course[];
+  public mobileView: MediaQueryList;
+
   constructor(
     public dialog: MatDialog,
     private store: Store<{ degreePlanner: DegreePlannerState }>,
-  ) {}
+    mediaMatcher: MediaMatcher,
+  ) {
+    this.mobileView = mediaMatcher.matchMedia('(max-width: 900px)');
+  }
 
   public ngOnInit() {
     this.hasItemDraggedOver = false;