move place order button to main column

hlxsites · Nov 29, 2024 · 42e0ed0 · 42e0ed0
1 parent 021bd0a
commit 42e0ed0
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/blocks/commerce-checkout/commerce-checkout.css b/blocks/commerce-checkout/commerce-checkout.css
@@ -254,6 +254,27 @@
 }
 
 @media only screen and (width >= 320px) and (width <= 768px) {
+  .checkout__main,
+  .checkout__aside {
+    display: contents;
+  }
+
+  .checkout__block {
+    order: 3;
+  }
+
+  .checkout__heading {
+    order: 1;
+  }
+
+  .checkout__cart-summary {
+    order: 2;
+  }
+
+  .checkout__place-order {
+    order: 4;
+  }
+
   .order-confirmation {
     grid-template-columns: repeat(var(--grid-1-columns), 1fr);
     padding-top: 0;
@@ -304,8 +325,6 @@
   }
 
   .checkout__place-order {
-    display: grid;
-    grid-column: 1 / span 7;
     margin-top: 0;
   }
 }
diff --git a/blocks/commerce-checkout/commerce-checkout.js b/blocks/commerce-checkout/commerce-checkout.js
@@ -142,12 +142,12 @@ export default async function decorate(block) {
           <div class="checkout__block checkout__delivery"></div>
           <div class="checkout__block checkout__payment-methods"></div>
           <div class="checkout__block checkout__billing-form"></div>
+          <div class="checkout__block checkout__place-order"></div>
         </div>
         <div class="checkout__aside">
           <div class="checkout__block checkout__order-summary"></div>
           <div class="checkout__block checkout__cart-summary"></div>
         </div>
-        <div class="checkout__block checkout__place-order"></div>
       </div>
     </div>
   `);