fix: fix banner position on mobile

saas-js · Aug 6, 2022 · e74bb6f · e74bb6f
1 parent 7bfc20b
commit e74bb6f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/apps/website/src/components/announcement-banner/announcement-banner.tsx b/apps/website/src/components/announcement-banner/announcement-banner.tsx
@@ -37,7 +37,12 @@ export const AnnouncementBanner: React.FC<AnnouncementBannerProps> = (
   }
 
   return (
-    <Flex position="absolute" zIndex="10" top="200px" width="100%">
+    <Flex
+      position="absolute"
+      zIndex="10"
+      top={{ base: '100px', lg: '200px' }}
+      width="100%"
+    >
       <Container maxW="container.2xl" px="8">
         <FallInPlace>
           <NextLink href={href}>

diff --git a/apps/website/src/pages/index.tsx b/apps/website/src/pages/index.tsx
@@ -144,8 +144,9 @@ const Home = () => {
                   >
                     Saas UI is a <Em>React component library</Em> and{' '}
                     <Em>starterkit</Em>
-                    <Br /> that doesn&apos;t get in your way and helps you{' '}
-                    <Br /> build intuitive SaaS products with speed.
+                    <Br display={{ base: 'none', md: 'inline' }} /> that
+                    doesn&apos;t get in your way and helps you <Br /> build
+                    intuitive SaaS products with speed.
                   </FallInPlace>
                 }
               >