WL-484: Checkout buttons alignment fixed.

ecommerce/static/sass/partials/views/_basket.scss

@@ -190,3 +190,15 @@
         }
     }
 }
+
+/* extra Small devices (phones, 768px and lower) */
+@media (max-width: $screen-xs-max) {
+    .basket .container {
+        .payment-buttons {
+            .payment-button {
+                width: 100%;
+                margin-bottom: 2px;
+            }
+        }
+    }
+}

ecommerce/static/sass/partials/views/_credit.scss

@@ -78,6 +78,11 @@
   div.advantages p {
     color: $gray;
   }
+
+  .payment-button {
+    width: 100%;
+    margin-bottom: 2px;
+  }
 }
 
 .advatanges-panel {
@@ -97,11 +102,6 @@
   border-bottom: 1px solid $gray-light;
 }
 
-.payment-button {
-  width: 100%;
-  margin-bottom: 2px;
-}
-
 .cap-image {
   max-width: 20px;
   margin-bottom: 5px;
@@ -109,19 +109,22 @@
 
 /* Small devices (tablets, 768px and up) */
 @media (min-width: $screen-sm-min) {
-  .payment-button {
-    width: 49%;
-  }
+  .credit-checkout {
+    .payment-button {
+      width: 49%;
+    }
 
-  .course-details {
-    border-bottom: none;
+    .course-details {
+      border-bottom: none;
+    }
   }
-
 }
 
 /* Medium devices (desktops, 992px and up) */
-@media (min-width: $screen-md-min) {
-  .payment-button {
-    width: auto;
+@media (min-width: $screen-xs) {
+  .credit-checkout {
+    .payment-button {
+      width: auto;
+    }
   }
 }