Bug Fix for Premium Beans Responsive UI - Fixed the Cards moving out of frame

src/Pages/PremiumBeans.js

@@ -6,7 +6,9 @@ const Loader = styled.div`
   height: 90vh;
   width: 100%;
   position:relative;
-
+  @media (max-width: 880px) {    
+      height: 1700px;
+  }
 `;
 
 
@@ -252,19 +254,68 @@ const CoffeeTapNozzle = styled.div`
     border-radius: 0%;
 `;
 const CardsContainer = styled.div`
-  position: absolute;
+  position: relative;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 500px;
   justify-content: space-between;
   width: 1000px;
+  @media (max-width: 1050px) {    
+    margin:0;
+    place-items: center;
+    gap: 340px;
+    
+  }
+  @media (max-width: 940px) {    
+    margin:0;
+    place-items: center;
+    gap: 250px;
+    
+  }
+  @media (max-width: 880px) {    
+    margin:0;
+    place-items: center;
+    top:800px;
+    grid-template-columns: 1fr;
+    
+  }
+  @media (max-width: 820px) {    
+    margin:0;
+    place-items: center;
+    top:800px;
+    grid-template-columns: 1fr;    
+  }
+  @media (max-width: 770px) {    
+    margin: 0;
+    place-items: center;
+    top:800px;
+    grid-template-columns: 1fr;    
+  }
+  @media (max-width: 600px) {    
+    margin: 0;
+    place-items: center;
+    top:800px;
+    grid-template-columns: 1fr;    
+  }
+  @media (max-width: 500px) {    
+    margin:0;
+    place-items: center;
+    top:800px;
+    grid-template-columns: 1fr;    
+  }
+  
 `;
 
 const CardColumn = styled.div`
-  display: flex;
+  display: flex;  
   flex-direction: column;
   gap: 40px;
+  @media (max-width: 880px) {        
+    margin-top:100px;    
+  }
 `;
 
 const Card = styled.div`
@@ -274,6 +325,12 @@ const Card = styled.div`
   flex-direction: column;
   align-items: center;
   background: transparent;
+  @media (max-width: 880px) {        
+    width: 480px;        
+  }
+  @media (max-width: 600px) {        
+    width: 240px;        
+  }
 `;
 
 const CardImage = styled.div`
@@ -356,20 +413,8 @@ function PremiumBeans() {
     },
   ];
   return (
-    <Loader >
-      <CardsContainer>
-        {/* Left cards */}
-        <CardColumn>
-          {beans.slice(0, 2).map((bean) => (
-            <Card key={bean.id}>
-              <CardImage style={{ backgroundImage: `url(${bean.image})` }} />
-              <CardContent>
-                <CardTitle>{bean.title}</CardTitle>
-                <CardDescription>{bean.description}</CardDescription>
-              </CardContent>
-            </Card>
-          ))}
-        </CardColumn>
+    <Loader >     
+
     <Container>
       <CoffeeHeader>
         <CoffeeButtonOne />
@@ -400,7 +445,22 @@ function PremiumBeans() {
       <CoffeeFooter />
       <CoffeeFooterAfter />
     </Container>
+
+    <CardsContainer>    
+    <CardColumn>
+    {/* Left cards */}
+          {beans.slice(0, 2).map((bean) => (
+            <Card key={bean.id}>
+              <CardImage style={{ backgroundImage: `url(${bean.image})` }} />
+              <CardContent>
+                <CardTitle>{bean.title}</CardTitle>
+                <CardDescription>{bean.description}</CardDescription>
+              </CardContent>
+            </Card>
+          ))}
+    </CardColumn>
     <CardColumn>
+    {/*Right Cards*/}
           {beans.slice(2).map((bean) => (
             <Card key={bean.id}>
               <CardImage style={{ backgroundImage: `url(${bean.image})` }} />
@@ -415,5 +475,4 @@ function PremiumBeans() {
     </Loader>
   );
 }
-
 export default PremiumBeans;