From 88bc9e211f1df63f5fb32baedfdc530781c32ce6 Mon Sep 17 00:00:00 2001
From: 2315080 <harleen_kaur2315080@gndec.ac.in>
Date: Wed, 22 Jan 2025 19:58:10 +0530
Subject: [PATCH] made buttons in shop.js responsive

---
 .codegpt/head     |  1 +
 src/Pages/Shop.js | 16 +++++++++-------
 2 files changed, 10 insertions(+), 7 deletions(-)
 create mode 100644 .codegpt/head

diff --git a/.codegpt/head b/.codegpt/head
new file mode 100644
index 0000000..ec6bf0d
--- /dev/null
+++ b/.codegpt/head
@@ -0,0 +1 @@
+455e1988-76c8-4da9-9ba6-371b4543658f
\ No newline at end of file
diff --git a/src/Pages/Shop.js b/src/Pages/Shop.js
index 1d772a2..528bf38 100644
--- a/src/Pages/Shop.js
+++ b/src/Pages/Shop.js
@@ -763,15 +763,17 @@ function Shop() {
         variant="text"
         aria-label="Basic button group"
         sx={{
-          borderRadius: "8px",
-          padding: "4px",
-          marginLeft: "230px",
+          display: 'flex',
+          flexDirection: { xs: 'column', sm: 'column', md: 'row' },
+          borderRadius: { xs: '2px', sm: '4px', md: '8px', lg: '12px', xl: '16px' },
+          padding: { xs: '1px', sm: '2px', md: '4px', lg: '6px', xl: '8px' },
+          marginLeft: '20%'
         }}
       >
         <Button
           onClick={() => setCategory("hot")}
           style={{
-            width: "200px",
+            width:{ xs: '80%', sm: '75%', md: '260px', lg: '280px', xl: '300px' },
             backgroundColor: category === "hot" ? "#f0efdc" : "#7c2414",
             color: category === "hot" ? "black" : "white",
           }}
@@ -781,7 +783,7 @@ function Shop() {
         <Button
           onClick={() => setCategory("cold")}
           style={{
-            width: "200px",
+            width: { xs: '80%', sm: '75%', md: '260px', lg: '280px', xl: '300px' },
             backgroundColor: category === "cold" ? "#f0efdc" : "#7c2414",
             color: category === "cold" ? "black" : "white",
           }}
@@ -791,7 +793,7 @@ function Shop() {
         <Button
           onClick={() => setCategory("food")}
           style={{
-            width: "200px",
+            width: { xs: '80%', sm: '75%', md: '260px', lg: '280px', xl: '300px' },
             backgroundColor: category === "food" ? "#f0efdc" : "#7c2414",
             color: category === "food" ? "black" : "white",
           }}
@@ -890,4 +892,4 @@ function Shop() {
   );
 }
 
-export default Shop;
+export default Shop;
\ No newline at end of file