Fix broken hover state on mobile

2021-11-27 12:46:24 +01:00
parent 5733476fd9
commit dbedae78ca
2 changed files with 24 additions and 2 deletions
--- a/components/roadmap/home-roadmap-item.tsx
+++ b/components/roadmap/home-roadmap-item.tsx
@ -31,7 +31,19 @@ export function HomeRoadmapItem(props: RoadmapGridItemProps) {
    <Box
      as={Link}
      href={url}
-      _hover={{ textDecoration: 'none', transform: 'scale(1.02)', opacity: '1 !important' }}
+      _hover={{
+        textDecoration: 'none',
+        transform: 'scale(1.02)',
+        opacity: '1 !important'
+      }}
+      sx={{
+        // On mobile devices, don't change the scale
+        '@media (hover: none)': {
+          '&:hover': {
+            transform: 'scale(1)'
+          }
+        }
+      }}
      flex={1}
      shadow='2xl'
      className={'home-roadmap-item'}