Merge pull request #794 from edx/malikshahzad228/WL-510

WL-510: UI Issues fixed

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

@@ -6,13 +6,6 @@
             display: none;
         }
 
-        .basket-items,
-        .total,
-        .verification-note,
-        .help {
-            margin: 0 20px;
-        }
-
         #basket_totals,
         .price {
             @include float(right);
@@ -143,36 +136,41 @@
             .course-price-label {
                 font-weight: normal;
                 font-size: 0.84rem;
+                + span {
+                    display: inline-block;
+                    margin-top: 8px;
+                }
             }
         }
 
         .total {
             padding-top: 20px;
+            margin-bottom: 1.25rem;
 
             p.voucher {
                 @include float(left);
 
                 margin: 0 20px;
-
                 color: gray;
             }
 
             .remove-voucher {
                 border: none;
-
                 background: none;
                 padding: 0;
-
                 color: red;
             }
 
             .use-voucher {
                 @include float(left);
 
+                p {
+                    margin-bottom: 0;
+                }
+
                 #id_code {
                     border: 1px solid #c8c8c8;
                     border-radius: 4px;
-
                     padding: 4.5px 12px;
                 }
             }
@@ -218,8 +216,6 @@
 
         .verification-note {
             margin-top: 20px;
-
-            padding: 20px;
         }
 
         .help {

ecommerce/templates/oscar/basket/partials/basket_content.html

@@ -175,17 +175,21 @@
         </div>
 
         <div class="row verification-note">
-            <span><i class="fa fa-exclamation-circle"></i></span>
-            {# Translators: <b></b> tags will bold the text within. Keep the tags and translate the text within. #}
-            {% if is_verification_required %}
-                {% trans "<b>Note:</b> To earn a verified certificate, you must verify your identity with a <b>webcam</b> and a <b>government-issued photo ID</b>. " %}
-            {% else %}
-                {% trans "<b>Note:</b> To complete your enrollment, select Checkout or Checkout with PayPal." %}
-            {% endif %}
+            <div class="col-sm-12">
+                <span><i class="fa fa-exclamation-circle"></i></span>
+                {# Translators: <b></b> tags will bold the text within. Keep the tags and translate the text within. #}
+                {% if is_verification_required %}
+                    {% trans "<b>Note:</b> To earn a verified certificate, you must verify your identity with a <b>webcam</b> and a <b>government-issued photo ID</b>. " %}
+                {% else %}
+                    {% trans "<b>Note:</b> To complete your enrollment, select Checkout or Checkout with PayPal." %}
+                {% endif %}
+            </div>
         </div>
         <div class="row help">
-            <p><b>{% trans "Have questions?" %}</b></p>
-            <a href="{{ support_url }}">{% trans "Please read our FAQs to view common questions about our certificates." %}</a>
+            <div class="col-sm-12">
+                <p><b>{% trans "Have questions?" %}</b></p>
+                <a href="{{ support_url }}">{% trans "Please read our FAQs to view common questions about our certificates." %}</a>
+            </div>
         </div>
     </div>
 {% else %}