made buttons in shop.js responsive

Mujtabaa07 · Jan 22, 2025 · 88bc9e2 · 88bc9e2
1 parent 5432376
commit 88bc9e2
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/.codegpt/head b/.codegpt/head
@@ -0,0 +1 @@
+455e1988-76c8-4da9-9ba6-371b4543658f
diff --git 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;