MAGETWO-39619: Broken layout for shipping checkout step.Blank Theme

Author: zanilee

app/code/Magento/Checkout/view/frontend/web/template/shipping.html

@@ -4,7 +4,7 @@
  * See COPYING.txt for license details.
  */
 -->
-<li id="opc-shipping" data-bind="fadeVisible: visible()">
+<li id="opc-shipping" class="checkout-shipping-address" data-bind="fadeVisible: visible()">
     <div class="step-title" data-bind="text: $t('Shipping Address')" data-role="title"></div>
     <div id="checkout-step-shipping"
          class="step-content"
@@ -48,7 +48,10 @@
 
 
 <!--Shipping method template-->
-<li id="opc-shipping_method" data-bind="fadeVisible: visible(), blockLoader: isLoading" role="presentation">
+<li id="opc-shipping_method"
+    class="checkout-shipping-method"
+    data-bind="fadeVisible: visible(), blockLoader: isLoading"
+    role="presentation">
     <div class="checkout-shipping-method">
         <div class="step-title" data-bind="text: $t('Shipping Methods')" data-role="title"></div>
         <!-- ko foreach: getRegion('before-shipping-method-form') -->

app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_checkout.less

@@ -13,11 +13,9 @@
 @checkout-step-title__border: @border-width__base solid @color-gray80;
 @checkout-step-title__font-size: 26px;
 @checkout-step-title__font-weight: @font-weight__light;
-@checkout-step-title__margin-bottom: 28px;
 @checkout-step-title__padding: @indent__s;
 
 @checkout-step-title-mobile__font-size: 18px;
-@checkout-step-title-mobile__margin-bottom: @indent__base;
 
 //
 //  Common
@@ -39,7 +37,6 @@
 
         .step-title {
             &:extend(.abs-checkout-title all);
-            .css(margin, 0 0 @checkout-step-title__margin-bottom);
         }
 
         .step-content {
@@ -66,7 +63,6 @@
     .opc-wrapper {
         .step-title {
             .css(font-size, @checkout-step-title-mobile__font-size);
-            .css(margin-bottom, @checkout-step-title-mobile__margin-bottom);
             border-bottom: 0;
             padding-bottom: 0;
         }

app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/module/checkout/_shipping.less

@@ -8,6 +8,7 @@
 //  _____________________________________________
 
 @checkout-shipping-address__max-width: 600px;
+@checkout-shipping-address__margin-top: 28px;
 
 @checkout-shipping-item-icon__background-color: @checkout-shipping-item__active__border-color;
 @checkout-shipping-item-icon__color: @color-white;
@@ -50,6 +51,7 @@
 
         .form-login,
         .form-shipping-address {
+            .css(margin-top, @checkout-shipping-address__margin-top);
             margin-bottom: @indent__base;
 
             .fieldset {
@@ -204,6 +206,7 @@
             .css(margin, @checkout-shipping-item-mobile__padding);
             .css(padding, @checkout-shipping-item-mobile__padding);
         }
+
         .shipping-address-item {
             .css(border-bottom, 1px solid @checkout-shipping-item-before__border-color);
             .css(margin, @checkout-shipping-item-mobile__margin);
@@ -219,6 +222,11 @@
             }
         }
 
+        .form-login,
+        .form-shipping-address {
+            .css(margin-top, @checkout-shipping-address__margin-top);
+        }
+
         .action-select-shipping-item {
             float: none;
             margin-top: @indent__s;

app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_checkout.less

@@ -13,15 +13,13 @@
 @checkout-step-title__border: @border-width__base solid @color-gray80;
 @checkout-step-title__font-size: 26px;
 @checkout-step-title__font-weight: @font-weight__light;
-@checkout-step-title__margin-bottom: 28px;
 @checkout-step-title__padding: @indent__s;
 
 @checkout-step-title-mobile__font-size: 18px;
-@checkout-step-title-mobile__margin-bottom: @indent__base;
 
 @checkout-step-content-mobile__background: @color-gray-light01;
 @checkout-step-content-mobile__margin-s: 15px;
-@checkout-step-content-mobile__margin: 0 -(@checkout-step-content-mobile__margin-s) @checkout-step-content-mobile__margin-s;
+@checkout-step-content-mobile__margin: @indent__base -(@checkout-step-content-mobile__margin-s) @checkout-step-content-mobile__margin-s;
 
 //
 //  Common
@@ -44,7 +42,6 @@
         .step-title {
             &:extend(.abs-checkout-title all);
             .css(border-bottom, @checkout-step-title__border);
-            .css(margin, 0 0 @checkout-step-title__margin-bottom);
         }
 
         .step-content {
@@ -71,7 +68,6 @@
     .opc-wrapper {
         .step-title {
             .css(font-size, @checkout-step-title-mobile__font-size);
-            .css(margin-bottom, @checkout-step-title-mobile__margin-bottom);
             border-bottom: 0;
             padding-bottom: 0;
         }

app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_order-summary.less

@@ -164,7 +164,7 @@
         > .title {
             border-bottom: 0;
             .css(font-size, @checkout-step-title-mobile__font-size);
-            .css(margin-bottom, @checkout-step-title-mobile__margin-bottom);
+            margin-bottom: @indent__base;
             padding-bottom: 0;
         }
         .totals {

app/design/frontend/Magento/luma/Magento_Checkout/web/css/source/module/checkout/_shipping.less

@@ -8,6 +8,7 @@
 //  _____________________________________________
 
 @checkout-shipping-address__max-width: 500px;
+@checkout-shipping-address__margin-top: 28px;
 
 @checkout-shipping-item-icon__background-color: @checkout-shipping-item__active__border-color;
 @checkout-shipping-item-icon__color: @color-white;
@@ -50,7 +51,8 @@
 
         .form-login,
         .form-shipping-address {
-            .css(margin-bottom, @checkout-step-title__margin-bottom);
+            .css(margin-top, @checkout-shipping-address__margin-top);
+            .css(margin-bottom, @checkout-shipping-address__margin-top);
             .fieldset {
                 .field {
                     .label {
@@ -292,7 +294,7 @@
 
         .form-login {
             .css(border-bottom, @checkout-step-title__border);
-            .css(padding-bottom, @checkout-step-title__margin-bottom);
+            padding-bottom: @indent__base;
         }
     }
     .table-checkout-shipping-method {