updated resources for iframes

Author: wanchufley

docs/resources/iframes/coffee-shop.html

@@ -20,7 +20,7 @@ <h1>Coffee Masters</h1>
               <p>Capuccino</p>
               <p>Soya Milk</p>
             </div>
-            <p class="product-price">3.85 $</p>
+            <p class="product-price">$3.85</p>
           </div> 
           <hr>
           <div class="item">
@@ -30,7 +30,7 @@ <h1>Coffee Masters</h1>
               <p>Soya Milk</p>
               <p>No Sugar</p>
             </div>
-            <p class="product-price">3.85 $</p>
+            <p class="product-price">$3.85</p>
           </div> 
           <hr>
           <div class="item">
@@ -39,7 +39,7 @@ <h1>Coffee Masters</h1>
               <p>Croissant</p>
               <p>Butter</p>
             </div>
-            <p class="product-price">2.45 $</p>
+            <p class="product-price">$2.45</p>
           </div> 
         </div>
         <div class="wallet">
@@ -70,23 +70,23 @@ <h1 class="section-title">PAYMENT DETAILS</h1>
               Subtotal:
             </td>
             <td class="right-cells"> <!--0,1-->
-              9,65 $
+              $9,65
             </td>
           </tr>
           <tr>
             <td class="left-cells"> <!--1,0-->
               Tax:
             </td>
             <td class="right-cells"> <!--1,1-->
-              0,82 $
+              $0,82
             </td>
           </tr>
           <tr>
             <td class="left-cells"> <!--2,0-->
               Total:
             </td>
             <td class="right-cells"> <!--2,1-->
-              10,47 $
+              $10,47
             </td>
           </tr>
         </table>

docs/resources/iframes/stylesheets/styles.css

@@ -1,3 +1,6 @@
+* {
+  box-sizing: border-box;
+}
 body {
   font-family: 'Open Sans', sans-serif;
 }
@@ -63,23 +66,30 @@ input {
 }
 .cart {
   display: flex;
+  margin: 20px;
+}
+@media (max-width: 768px) {
+  .cart {
+    flex-direction: column;
+  }
 }
 .page {
   display: flex;
   flex-direction: column;
+  size: 100%;
 }
 .items {
-  border-radius: 5px;
   padding: 20px;
-  margin: 20px;
-  width: 50%;
+  margin: 20 0px;
+  border-radius: 5px;
+  width: 100%;
   background-color: Bisque;
   box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
 }
 .wallet {
   padding: 20px;
   margin: 10px;
-  width: 50%;
+  width: 100%;
 }
 .input-label {
   background-color: Bisque;
@@ -117,7 +127,6 @@ input {
   color: chocolate;
 }
 .item {
-  padding: 10px;
   display: flex;
   color: chocolate;
 }