Merge pull request #392 from PerficientDave/bug/hero-image-css-updates

Update styles to fix unwanted space at certain screen sizes
Sitecore · Mar 7, 2024 · 243e958 · 243e958
2 parents f13019d + 66af62e
commit 243e958
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Hero.tsx b/src/Project/Sugcon2024/Sugcon/src/components/Basic Components/Hero.tsx
@@ -34,17 +34,20 @@ export const HeroHomepage = (props: HeroProps): JSX.Element => {
   return (
     <Flex
       direction={{ base: 'column', md: 'row' }}
-      alignItems="center"
+      alignItems="stretch"
       bg="#f0f0f0"
       maxHeight={{ base: 'auto', md: '400px' }}
       w="100%"
+      h={{ base: 'auto', md: '100vh' }}
+      overflow="hidden"
     >
       <Flex
         direction="column"
         margin="0 auto" // Center the content box
         p={5}
         flexGrow={1}
         minWidth="50%"
+        justifyContent="center"
       >
         <Box width="auto" alignSelf="end" maxWidth="620px" minWidth="360px">
           <Heading as="h2" fontSize="30px" fontWeight="bold" mb="33px">
@@ -67,14 +70,13 @@ export const HeroHomepage = (props: HeroProps): JSX.Element => {
           )}
         </Box>
       </Flex>
-      <Box minWidth={{ base: '100%', md: '50%' }} maxHeight="400px" h="100%" overflow="hidden">
+      <Box flexShrink={0} minWidth={{ base: '100%', md: '50%' }} h="full" overflow="hidden">
         {' '}
         <Image
           src={props.fields.Image?.value?.src}
           //alt={props.fields.Image?.value?.alt}
           width="full"
-          height="100%"
-          maxHeight="400px"
+          height="full"
           objectFit="cover"
         />
       </Box>

diff --git a/...Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/HomepageHero.stories.ts b/...Project/Sugcon2024/Sugcon/src/stories/components/Basic Components/HomepageHero.stories.ts
@@ -36,7 +36,7 @@ export const Homepage: Story = {
       },
       Image: {
         value: {
-          src: 'https://picsum.photos/1200/800',
+          src: 'https://picsum.photos/1000/566',
         },
       },
     },