From 2ae92ed05fb4687616669561c0db4419c572c728 Mon Sep 17 00:00:00 2001
From: Flavio Oliveira <61277545+fl4viooliveira@users.noreply.github.com>
Date: Sun, 1 May 2022 21:04:29 +0100
Subject: [PATCH] :iphone: cart checkout success pages

fixed responsivity on with under 500px
---
 frontend/styles/Cart.module.css     |  2 +-
 frontend/styles/Checkout.module.css | 13 +++++++++++--
 frontend/styles/Success.module.css  | 10 ++++++++++
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/frontend/styles/Cart.module.css b/frontend/styles/Cart.module.css
index 67f9a5c..e5ebf19 100644
--- a/frontend/styles/Cart.module.css
+++ b/frontend/styles/Cart.module.css
@@ -73,7 +73,7 @@
     /* flex-direction: column; */
   }
 }
-@media (max-width: 400px) {
+@media (max-width: 500px) {
   .container {
     width: calc(100% - 20px);
     margin: 10px auto;
diff --git a/frontend/styles/Checkout.module.css b/frontend/styles/Checkout.module.css
index d385257..e3a728c 100644
--- a/frontend/styles/Checkout.module.css
+++ b/frontend/styles/Checkout.module.css
@@ -1,8 +1,8 @@
 .containerBox {
   display: flex;
-  width: calc(100% - 140px);
+  /* width: calc(100% - 140px); */
   height: fit-content;
-  margin: 30px auto;
+  margin: 0px auto;
   color: #ffff;
   flex-direction: column;
 }
@@ -72,7 +72,16 @@
   margin: 15px 0;
 }
 @media (max-width: 900px) {
+  .containerBox {
+    width: calc(100% - 20px);
+  }
   .mainBox {
     flex-wrap: wrap;
   }
 }
+@media (max-width: 500px) {
+  .mainBox {
+    width: calc(100% - 20px);
+    margin: 10px auto;
+  }
+}
diff --git a/frontend/styles/Success.module.css b/frontend/styles/Success.module.css
index 0c111fc..a4d41f2 100644
--- a/frontend/styles/Success.module.css
+++ b/frontend/styles/Success.module.css
@@ -9,9 +9,19 @@
 }
 .container h1 {
   margin: 15px 0;
+  text-align: center;
 }
 .container a {
   margin: 15px 0;
   color: #ffff;
   font-size: 25px;
 }
+@media (max-width: 500px) {
+  .container {
+    width: calc(100% - 20px);
+    margin: 10px auto;
+  }
+  .container h1 {
+    font-size: 20px;
+  }
+}