From c914527431deb37ec54e989f0e8c22ab1946b795 Mon Sep 17 00:00:00 2001
From: Daniel Clemente Laboreo <daniel@opencraft.com>
Date: Tue, 21 Nov 2017 17:46:21 +0200
Subject: [PATCH 1/2] Make the "about course" page adapt to small screens

---
 .../sass/multicourse/_course_about.scss       | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss
index 676006244e..f3dc274f77 100644
--- a/lms/static/sass/multicourse/_course_about.scss
+++ b/lms/static/sass/multicourse/_course_about.scss
@@ -1,6 +1,11 @@
 .course-info {
   .container {
     padding-bottom: 120px;
+
+    @media screen and (max-width: $bp-screen-md) {
+      min-width: auto;
+      padding: 20px;
+    }
   }
 
   header.course-profile {
@@ -26,7 +31,11 @@
 
       margin: 0 auto;
       max-width: map-get($container-max-widths, xl);
-      min-width: 760px;
+
+      @media screen and (min-width: $bp-screen-md) {
+        min-width: $bp-screen-md;
+      }
+
       position: relative;
       z-index: 2;
 
@@ -291,10 +300,13 @@
   }
 
   .details {
-    @include float(left);
-    @include margin-right(flex-gutter());
+    @media screen and (min-width: $bp-screen-md) {
+      @include float(left);
+      @include margin-right(flex-gutter());
+
+      width: flex-grid(8);
+    }
 
-    width: flex-grid(8);
     font: normal 1em/1.6em $serif;
 
     h2 {
@@ -383,10 +395,12 @@
   }
 
   .course-sidebar {
-    @include box-sizing(border-box);
-    @include float(left);
+    @media screen and (min-width: $bp-screen-md) {
+      @include box-sizing(border-box);
+      @include float(left);
 
-    width: flex-grid(4);
+      width: flex-grid(4);
+    }
 
     > section {
       box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.15);

From 3665abd4082fab76bc6b1feb8c4044cda7ec31dd Mon Sep 17 00:00:00 2001
From: Daniel Clemente Laboreo <daniel@opencraft.com>
Date: Tue, 28 Nov 2017 13:45:26 +0200
Subject: [PATCH 2/2] Used $baseline, get-map and media-breakpoint-down

---
 lms/static/sass/multicourse/_course_about.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss
index f3dc274f77..dd7b1b1959 100644
--- a/lms/static/sass/multicourse/_course_about.scss
+++ b/lms/static/sass/multicourse/_course_about.scss
@@ -2,9 +2,9 @@
   .container {
     padding-bottom: 120px;
 
-    @media screen and (max-width: $bp-screen-md) {
+    @include media-breakpoint-down(md) {
       min-width: auto;
-      padding: 20px;
+      padding: $baseline;
     }
   }
 
@@ -32,8 +32,8 @@
       margin: 0 auto;
       max-width: map-get($container-max-widths, xl);
 
-      @media screen and (min-width: $bp-screen-md) {
-        min-width: $bp-screen-md;
+      @include media-breakpoint-up(md) {
+          min-width: map-get($container-max-widths, md);
       }
 
       position: relative;
@@ -300,7 +300,7 @@
   }
 
   .details {
-    @media screen and (min-width: $bp-screen-md) {
+    @include media-breakpoint-up(md) {
       @include float(left);
       @include margin-right(flex-gutter());
 
@@ -395,7 +395,7 @@
   }
 
   .course-sidebar {
-    @media screen and (min-width: $bp-screen-md) {
+    @include media-breakpoint-up(dm) {
       @include box-sizing(border-box);
       @include float(left);