responsive

src/components/Community/CommunityBanner.jsx

@@ -83,8 +83,15 @@ const CommunityBanner = () => {
               }}
             >
               {BannerContent[0].heading1}
-            </span>{" "}
-            <br />
+            </span>
+            <br
+              sx={{
+                display: ["block", "none"], // Show by default, hide on screens less than 600px wide
+                "@media (max-width: 600px)": {
+                  display: "none", // Hide on screens less than 600px wide
+                },
+              }}
+            />
             {BannerContent[0].heading2}
           </Text>
           <Box

src/components/Community/CommunityCard.jsx

@@ -152,10 +152,10 @@ const CommunityCard = () => {
           <Text
             as={"h2"}
             paddingTop={"4rem"}
-            paddingBottom={"5rem"}
+            paddingBottom={"4rem"}
             fontWeight={700}
             fontSize={"38px"}
-            textAlign={"left"}
+            textAlign={"center"}
             textTransform={"capitalize"}
             color={"#fff"}
             sx={{

src/components/Community/Connect.jsx

@@ -60,7 +60,7 @@ const items = [
 ];
 
 const Connect = () => {
-  return (
+  return ( 
     <Box
       //   height={"80vh"}
       //   backgroundImage={`url(${banner})`}

src/components/Community/LearnMore.jsx

@@ -19,7 +19,7 @@ const LearnMore = () => {
       sx={{
         "@media (max-width: 1024px)": {
           height: "auto",
-        },
+        }, 
         "@media (max-width: 600px)": {
           fontSize: "28px",
         },
@@ -67,7 +67,7 @@ const LearnMore = () => {
             },
           }}
         >
-          {SectionContent.subContent}
+          {SectionContent.subContent}  
         </Text>
         <Text>
           <Link to="/BuildPage">

src/components/Community/Place.jsx

@@ -48,7 +48,7 @@ const Place = () => {
   return (
     <Box
       // height={"100vh"}
-      background={"#000"}
+      background={"#000"} 
       paddingTop={"4rem"}
       paddingBottom={"4rem"}
       backgroundSize={"cover"}
@@ -64,7 +64,7 @@ const Place = () => {
         paddingLeft={"7rem"}
         // height={"50vh"}
         sx={{
-          "@media (max-width: 500px)": {
+          "@media (max-width: 600px)": {
             paddingLeft: "1rem",
           },
         }}
@@ -81,6 +81,7 @@ const Place = () => {
             "@media (max-width: 500px)": {
               fontSize: "22px",
               fontWeight: "400",
+              paddingBottom:'30px'
             },
           }}
         >
@@ -96,6 +97,9 @@ const Place = () => {
             "&::-webkit-scrollbar": {
               width: "0px",
             },
+            "@media (max-width: 600px)": {
+              padding: "0px",
+            },
           }}
         >
           {content.map((item) => (