style: update Home page styles, responsivness

Pranav016 · Apr 14, 2022 · e7b2988 · e7b2988
1 parent 7fefe19
commit e7b2988
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css
@@ -1,6 +1,6 @@
 .footer {
 	height: fit-content;
-	width: 99vw;
+	width: 100vw;
 	display: flex;
 	justify-content: space-evenly;
 	align-items: center;

diff --git a/src/components/Hero/Hero.css b/src/components/Hero/Hero.css
@@ -1,10 +1,9 @@
 .hero {
 	height: 100vh;
-	width: 99vw;
+	width: 100vw;
 	display: flex;
 	justify-content: space-evenly;
 	align-items: center;
-	overflow-x: hidden;
 }
 
 .row-reverse {
@@ -25,10 +24,11 @@
 @media screen and (max-width: 600px) {
 	.hero {
 		flex-direction: column;
+		text-align: center;
 	}
 	.hero img,
 	.text-container {
-		height: 30vh;
+		height: fit-content;
 		width: 80vw;
 	}
 }
diff --git a/src/pages/Home/Home.css b/src/pages/Home/Home.css
@@ -0,0 +1,3 @@
+.home {
+	overflow-x: hidden;
+}
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Footer from '../../components/Footer/Footer';
 import Hero from '../../components/Hero/Hero';
 import { HeroDataInterface } from '../../database';
+import './Home.css';
 
 const Home: React.FC = () => {
 	const data: HeroDataInterface = {
@@ -19,7 +20,7 @@ const Home: React.FC = () => {
 		],
 	};
 	return (
-		<>
+		<div className='home'>
 			<Hero
 				imgPath={data.imgPath[0]}
 				heading={data.headings[0]}
@@ -32,7 +33,7 @@ const Home: React.FC = () => {
 				alternate={true}
 			/>
 			<Footer />
-		</>
+		</div>
 	);
 };