mobile view for cart, product-details and not-found pages

mohamedTaiebBsf · Feb 23, 2022 · a3cf9d8 · a3cf9d8
1 parent 600e554
commit a3cf9d8
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 3 deletions.
diff --git a/src/components/product-images/styles.js b/src/components/product-images/styles.js
@@ -3,13 +3,26 @@ import styled from "styled-components";
 const Container = styled.div`
   flex: 3;
   display: flex;
+
+  @media (max-width: 34.375rem) {
+    flex-direction: column;
+    margin-bottom: 1.25rem;
+  }
 `;
 
 const Thumbnails = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-right: 1rem;
+
+  @media (max-width: 34.375rem) {
+    order: 2;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-right: 0;
+  }
 `;
 
 const ThumbnailWrapper = styled.div`
@@ -23,6 +36,16 @@ const ThumbnailWrapper = styled.div`
   &:last-child {
     margin-bottom: 0;
   }
+
+  @media (max-width: 34.375rem) {
+    margin-bottom: 1rem;
+    margin-right: 1rem;
+
+    &:last-child {
+      margin-bottom: 1rem;
+      margin-right: 0;
+    }
+  }
 `;
 
 const Thumbnail = styled.img`
@@ -40,6 +63,10 @@ const BigImageWrapper = styled.div`
   height: 25rem;
   margin-right: 2rem;
   cursor: pointer;
+
+  @media (max-width: 34.375rem) {
+    order: 1;
+  }
 `;
 
 const BigImage = styled.img`

diff --git a/src/pages/cart/cart.jsx b/src/pages/cart/cart.jsx
@@ -34,7 +34,7 @@ class Cart extends Component {
       return (
         <React.Fragment>
           <CartProducts products={cartItems} isCart />
-          <Wrapper>
+          <Wrapper className="checkout">
             <TotalPrice>
               <Label>Total: </Label>
               <Price>{cartService.totalPrice(cartItems, currency)}</Price>

diff --git a/src/pages/cart/styles.js b/src/pages/cart/styles.js
@@ -34,12 +34,22 @@ const Wrapper = styled.div`
     margin-top: 0;
     flex-direction: column;
   }
+
+  &.checkout {
+    @media (max-width: 28.125rem) {
+      flex-direction: column;
+    }
+  }
 `;
 
 const TotalPrice = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+
+  @media (max-width: 28.125rem) {
+    align-self: start;
+  }
 `;
 
 const Label = styled.h3`
@@ -66,6 +76,18 @@ const Anchor = styled(Link)`
   &:hover {
     opacity: 0.8;
   }
+
+  &.shopping {
+    @media (max-width: 28.125rem) {
+      margin-top: 0;
+    }
+  }
+
+  @media (max-width: 28.125rem) {
+    width: 100%;
+    text-align: center;
+    margin-top: 2.25rem;
+  }
 `;
 
 const Image = styled.img`
@@ -75,6 +97,10 @@ const Image = styled.img`
 const Remark = styled.p`
   margin-bottom: 2rem;
   font-weight: 500;
+
+  @media (max-width: 28.125rem) {
+    text-align: center;
+  }
 `;
 
 const Button = styled.button`

diff --git a/src/pages/not-found/styles.js b/src/pages/not-found/styles.js
@@ -25,7 +25,7 @@ const Title = styled.h1`
   font-weight: 700;
 
   @media (max-width: 31.25rem) {
-    font-size: 10rem;
+    font-size: 5rem;
   }
 `;
 
@@ -44,6 +44,10 @@ const Image = styled.img`
   width: 7.5rem;
   margin: 0 1.25rem;
   animation: ${spookyAnimation} 2s alternate infinite linear;
+
+  @media (max-width: 31.25rem) {
+    width: 3.125rem;
+  }
 `;
 
 const Error = styled.h2`

diff --git a/src/pages/product-details/styles.js b/src/pages/product-details/styles.js
@@ -3,6 +3,10 @@ import styled from "styled-components";
 const Container = styled.div`
   display: flex;
   justify-content: space-between;
+
+  @media (max-width: 34.375rem) {
+    flex-direction: column;
+  }
 `;
 
 const Descriptions = styled.div`
@@ -26,10 +30,11 @@ const Price = styled.p`
 `;
 
 const Button = styled.button`
+  width: 100%;
   border: transparent;
   outline: none;
   background: var(--green);
-  padding: 1rem 5.8125rem;
+  padding: 1rem;
   transition: background 0.3s ease;
   font-weight: 600;
   color: var(--white);