diff --git a/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss b/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
index 36d06eb54..0ae7043f0 100644
--- a/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
+++ b/src/addon/block/recentlyaccesseditems/components/recentlyaccesseditems/recentlyaccesseditems.scss
@@ -1,11 +1,3 @@
 ion-app.app-root addon-block-recentlyaccesseditems .core-horizontal-scroll  .card {
     @include horizontal_scroll_item(80%, 250px, 300px);
-
-    [text-wrap] .label {
-        h2, p {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-    }
 }
\ No newline at end of file
diff --git a/src/core/courses/components/course-progress/course-progress.scss b/src/core/courses/components/course-progress/course-progress.scss
index 0805bdd31..cf0b3bc4c 100644
--- a/src/core/courses/components/course-progress/course-progress.scss
+++ b/src/core/courses/components/course-progress/course-progress.scss
@@ -15,7 +15,7 @@ ion-app.app-root core-courses-course-progress {
         }
 
         .core-course-thumb {
-            height: 150px;
+            padding-top: 40%;
             width: 100%;
             overflow: hidden;
             cursor: pointer;
@@ -49,10 +49,12 @@ ion-app.app-root core-courses-course-progress {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
+                flex-wrap: wrap;
             }
             .core-course-title {
-                margins: 6px 0;
+                margin: 5px 0;
                 flex-grow: 1;
+                max-width: calc(100% - 50px);
 
                 h2 ion-icon {
                     margin-right: 4px;
@@ -70,6 +72,7 @@ ion-app.app-root core-courses-course-progress {
 
             .item-button[icon-only] {
                 min-width: 50px;
+                width: 50px;
             }
         }
         .label {
@@ -93,7 +96,49 @@ ion-app.app-root core-courses-course-progress {
 
 
 ion-app.app-root .core-horizontal-scroll core-courses-course-progress {
-    @include horizontal_scroll_item(40%, 150px, 300px);
+    @include horizontal_scroll_item(45%, 210px, 300px);
+
+
+    ion-card.card {
+        .core-course-thumb {
+            padding-top: 40%;
+        }
+
+        .core-course-link {
+            @include padding(4px, 0px, 4px, 8px);
+            .core-course-shortname {
+                font-size: 1.2rem;
+            }
+
+            .core-course-title {
+                margin: 3px 0;
+                max-width: calc(100% - 40px);
+
+                h2 {
+                    font-size: 1.5rem;
+                    ion-icon {
+                        margin-right: 2px;
+                    }
+                }
+            }
+            .core-button-spinner {
+                min-height: 40px;
+                min-width: 40px;
+
+                ion-spinner {
+                    width: 20px;
+                    height: 20px;
+                }
+            }
+            .item-button[icon-only] {
+                min-width: 40px;
+                width: 40px;
+                font-size: 1.5rem;
+                padding: 8px;
+            }
+
+        }
+    }
 }
 
 body.version-3-1 .core-course-thumb{
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 0d6c2bad8..07ead78b8 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -359,17 +359,44 @@ $core-question-state-incorrect-color: $red-light !default;
     display: block;
 
     &.card-md, .card-md {
-      height: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
+      height: calc(100% - #{($card-md-margin-bottom + $card-md-margin-top)});
+      width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
     }
     &.card-ios, .card-ios {
-      height: calc(100% - #{($card-ios-margin-end + $card-ios-margin-start)});
+      height: calc(100% - #{($card-ios-margin-bottom + $card-ios-margin-top)});
+      width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
     }
     &.card-wp, .card-wp {
-      height: calc(100% - #{($card-wp-margin-end + $card-wp-margin-start)});
+      height: calc(100% - #{($card-wp-margin-bottom + $card-wp-margin-top)});
+      width: calc(100% - #{($card-md-margin-end + $card-md-margin-start)});
     }
-    &.card {
-      margin-top: $card-md-margin-start;
-      margin-bottom: $card-md-margin-end;
+    &.card-md {
+      margin-top: $card-md-margin-top;
+      margin-bottom: $card-md-margin-bottom;
+    }
+    &.card-ios {
+      margin-top: $card-ios-margin-top;
+      margin-bottom: $card-ios-margin-bottom;
+    }
+    &.card-wp {
+      margin-top: $card-wp-margin-top;
+      margin-bottom: $card-wp-margin-bottom;
+    }
+
+    &.card, .card {
+      @media (max-width: 360px) {
+        margin-left: 6px;
+        margin-right: 6px;
+        width: calc(100% - 12px);
+      }
+    }
+
+    [text-wrap] .label {
+        h2, p {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
     }
 }