Merge pull request #36 from parksaerom/fix/card-width-mobile

ladunjexa · web-flow · commit c62cc240b47b · 2024-12-08T14:13:38.000+02:00
Fix inconsistent ServiceCard width on mobile view
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="xs:w-[250px] w-full">
+    <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="xs:w-[250px] w-full">`
	`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]"`