Fixing mobile Layout

packages/web/components/templates/landing/LandingSection.tsx

@@ -2,11 +2,11 @@ import { HStack, VStack, Box } from '../../elements/LayoutPrimitives'
 import { CSS, styled } from '@stitches/react'
 
 type LandingSectionProps = {
-  titleText: string,
-  descriptionText: React.ReactElement,
-  icon?: React.ReactElement,
-  image: React.ReactElement,
-  containerStyles?: CSS,
+  titleText: string
+  descriptionText: React.ReactElement
+  icon?: React.ReactElement
+  image: React.ReactElement
+  containerStyles?: CSS
 }
 
 const MainContainer = styled(HStack, {
@@ -25,7 +25,7 @@ const titleTextStyles = {
   },
   '@xl': {
     fontSize: 45,
-  }
+  },
 }
 
 const descriptionTextStyles = {
@@ -48,43 +48,43 @@ const iconContainerStyles = {
 
 const imageContainerStyles = {
   width: '50%',
-  '@mdDown': {
-    width: 0,
-    display: 'none',
-  }
+  alignSelf: 'center',
 }
 
 const layoutStyles = {
   width: '50%',
-  padding: 10,
+  alignSelf: 'center',
+  padding: 20,
   '@mdDown': {
     width: '100%',
-  }
-}
-
-const innerLayoutStyles = {
-  maxWidth: 480,
-  alignSelf: 'center',
-  '@mdDown': {
-    alignItems: 'center',
   },
 }
-  
+
+// const innerLayoutStyles = {
+//   maxWidth: 480,
+//   alignSelf: 'center',
+//   '@mdDown': {
+//     alignItems: 'center',
+//   },
+// }
+
 export function LandingSection(props: LandingSectionProps): JSX.Element {
-    return (
-      <MainContainer distribution='start' alignment='center' css={props.containerStyles}>
-        <VStack distribution='center' css={layoutStyles}>
-          <VStack css={innerLayoutStyles}>
-            {/* <VStack distribution='center' alignment='center' css={iconContainerStyles}>
+  return (
+    <MainContainer
+      css={{flexWrap: 'wrap', ...props.containerStyles}}
+    >
+      <VStack distribution="center" alignment={'center'} css={layoutStyles}>
+        <VStack>
+          {/* <VStack distribution='center' alignment='center' css={iconContainerStyles}>
               {props.icon}
             </VStack> */}
-            <Box css={titleTextStyles}>{props.titleText}</Box>
-            <Box css={descriptionTextStyles}>{props.descriptionText}</Box>
-          </VStack>
+          <Box css={titleTextStyles}>{props.titleText}</Box>
+          <Box css={descriptionTextStyles}>{props.descriptionText}</Box>
         </VStack>
-        <HStack distribution='center' css={imageContainerStyles}>
-          {props.image}
-        </HStack>
-      </MainContainer>
-    )
+      </VStack>
+      <Box css={imageContainerStyles}>
+        {props.image}
+      </Box>
+    </MainContainer>
+  )
 }

packages/web/components/templates/landing/LandingSectionsContainer.tsx

@@ -92,6 +92,9 @@ const containerStyles = {
 const reversedSectionStyles = {
   flexDirection: 'row-reverse',
   marginBottom: 20,
+  '@mdDown': {
+    width: '100%',
+  },
 }
 
 const callToActionStyles = {
@@ -161,9 +164,8 @@ export function LandingSectionsContainer({
           srcSet="/static/landing/landingPage-1.png"
           alt="landingHero-1"
           style={{
-            width: '90%',
-            maxWidth: '90%',
-            height: '80%',
+            width: '70%',
+            maxWidth: '70%',
           }}
         />
       </Box>
@@ -182,7 +184,7 @@ export function LandingSectionsContainer({
             <img
               srcSet="/static/landing/landingPage-2.png"
               alt="landing-2"
-              style={{ height: '50vw', maxHeight: 500 }}
+              style={{ maxHeight: 400 }}
               sizes="auto 50vw"
             />
           }
@@ -232,8 +234,8 @@ export function LandingSectionsContainer({
           image={
             <img
               srcSet="/static/landing/landingPage-4.png"
-              alt="landing-3"
-              style={{ height: '38vw', maxHeight: 400, marginLeft: 40 }}
+              alt="landing-4"
+              style={{ maxHeight: 400, width: '100%' }}
               sizes="auto 50vw"
             />
           }
@@ -254,7 +256,7 @@ export function LandingSectionsContainer({
             <img
               srcSet="/static/landing/landingPage-5.png"
               alt="landing-5"
-              style={{ height: '38vw', maxHeight: 400 }}
+              style={{ maxHeight: 400 }}
               sizes="auto 50vw"
             />
           }
@@ -296,7 +298,7 @@ export function LandingSectionsContainer({
           <img
             srcSet="/static/landing/landingPage-7.png"
             alt="landing-7"
-            style={{ height: '38vw', maxHeight: 400 }}
+            style={{ maxHeight: 400 }}
             sizes="auto 50vw"
           />
         }