Refactor card width for better responsiveness on mobile view

saerom · saerom · commit aa8ff436eabc · 2024-10-24T17:03:15.000+09:00
- Updated card width to use max-w-[250px] and w-full for better responsiveness on smaller screens. Ensures cards are flexible on small devices while maintaining consistent width on larger screens.
diff --git a/src/components/sections/About.tsx b/src/components/sections/About.tsx
@@ -22,7 +22,7 @@ const ServiceCard: React.FC<IServiceCard> = ({ index, title, icon }) => (
     tiltMaxAngleY={30}
     glareColor="#aaa6c3"
   >
-    <div className="w-[250px]">
+    <div className="max-w-[250px] w-full xs:w-[250px]">
       <motion.div
         variants={fadeIn("right", "spring", index * 0.5, 0.75)}
         className="green-pink-gradient shadow-card w-full rounded-[20px] p-[1px]"

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ const ServiceCard: React.FC<IServiceCard> = ({ index, title, icon }) => (`
`22`	`22`	`tiltMaxAngleY={30}`
`23`	`23`	`glareColor="#aaa6c3"`
`24`	`24`	`>`
`25`		`- <div className="w-[250px]">`
	`25`	`+ <div className="max-w-[250px] w-full xs:w-[250px]">`
`26`	`26`	`<motion.div`
`27`	`27`	`variants={fadeIn("right", "spring", index * 0.5, 0.75)}`
`28`	`28`	`className="green-pink-gradient shadow-card w-full rounded-[20px] p-[1px]"`