Add responsiveness to HomePage

src/components/About.jsx

@@ -14,7 +14,7 @@ export const About = () => (
 			</p>
 		</article>
 		<section>
-			<img src="/images/Chef.jpg" alt="Mario" />{" "}
+			<img src="/images/Chef.jpg" alt="Mario" />
 			<img src="/images/Chef2.jpg" alt="Adrian" />
 		</section>
 	</section>

src/components/Specials.jsx

@@ -8,7 +8,7 @@ export const Specials = () => (
 			<h2>This week&lsquo;s specials!</h2>
 			<Link className="button-link">Online Menu</Link>
 		</section>
-		<section className="row">
+		<section className="row specials-row">
 			<Special
 				title="Greek salad"
 				image="/images/Food1.jpg"

src/index.css

@@ -19,12 +19,6 @@ a {
 	color: inherit;
 }
 
-#root {
-	display: grid;
-	grid-template-rows: 5rem 1fr 15rem;
-	min-height: 100vh;
-}
-
 main {
 	display: flex;
 	color: white;
@@ -46,6 +40,7 @@ img {
 .button-link {
 	background-color: var(--primary-2);
 	color: black;
+	text-align: center;
 	text-decoration: none;
 	padding: 0.5rem 1rem;
 	border-radius: 0.75rem;

src/routes/Root.jsx

@@ -1,15 +0,0 @@
-import { Outlet } from "react-router-dom"
-import { Footer } from "../components/Footer.jsx"
-import { Header } from "../components/Header.jsx"
-
-export const Root = () => {
-	return (
-		<>
-			<Header />
-			<main>
-				<Outlet />
-			</main>
-			<Footer />
-		</>
-	)
-}

src/styles/About.css

@@ -5,6 +5,17 @@
 	color: black;
 	position: relative;
 	min-height: 18rem;
+	padding: 0 2rem;
+	gap: 5rem;
+}
+
+.about p {
+	max-width: 40rem;
+}
+
+.about section {
+	width: 15rem;
+	flex-shrink: 0;
 }
 
 .about h2 {
@@ -14,10 +25,6 @@
 	color: var(--primary-1);
 }
 
-.about article {
-	width: 30%;
-}
-
 .about img {
 	height: 15rem;
 	position: absolute;
@@ -32,3 +39,9 @@
 	top: 2rem;
 	right: 10rem;
 }
+
+@media (max-width: 760px) {
+	.about section {
+		display: none;
+	}
+}

src/styles/ButtonLink.css

@@ -1,7 +0,0 @@
-.button-link {
-	background-color: var(--primary-2);
-	color: black;
-	text-decoration: none;
-	padding: 0.5rem 1rem;
-	border-radius: 0.75rem;
-}

src/styles/Footer.css

@@ -2,7 +2,7 @@ footer {
 	display: flex;
 	justify-content: center;
 	gap: 3rem;
-	padding: 2rem;
+	padding: 0.8rem;
 	background-color: var(--primary-1);
 	color: white;
 }
@@ -10,17 +10,24 @@ footer {
 footer section {
 	display: flex;
 	flex-direction: column;
+	gap: 0.2rem;
 }
 
 footer h3 {
 	font-size: 1rem;
+	margin: 0;
+	margin-bottom: 0.2rem;
 }
 
 footer img {
 	height: 10rem;
 }
 
-footer span {
-	padding: 0.5rem;
-	border-radius: 2rem;
+@media (max-width: 500px) {
+	footer img {
+		display: none;
+	}
+	footer {
+		gap: 1.45rem;
+	}
 }

src/styles/Header.css

@@ -1,9 +1,11 @@
 nav {
 	display: flex;
+	flex-wrap: wrap;
 	height: 100%;
 	align-items: center;
 	justify-content: center;
-	gap: 3rem;
+	gap: 0.5rem 3rem;
+	padding: 1rem;
 }
 
 header img {
@@ -13,12 +15,14 @@ header img {
 
 nav ul {
 	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
 	align-items: center;
 	gap: 1rem;
-	padding: 1rem 2rem;
 	border-radius: 2rem;
 	list-style: none;
 	margin: 0;
+	padding: 0;
 }
 
 nav a {

src/styles/Jumbo.css

@@ -24,3 +24,13 @@
 .jumbo h2 {
 	margin: 0;
 }
+
+@media (max-width: 550px) {
+	.jumbo {
+		align-items: center;
+	}
+
+	.jumbo img {
+		display: none;
+	}
+}

src/styles/Special.css

@@ -1,7 +1,7 @@
 .column {
-	width: 100%;
 	background-color: var(--secondary-1);
 	color: black;
+	max-width: 20rem;
 }
 
 .column,

src/styles/Specials.css

@@ -4,11 +4,15 @@
 }
 
 .specials {
-	width: 60%;
-	margin: 1rem auto;
+	margin: 1rem;
 }
 
 .specials h2 {
 	color: var(--primary-1);
 	font-size: 2rem;
 }
+
+.specials-row {
+	flex-wrap: wrap;
+	justify-content: center;
+}

src/styles/Testimonial.css

@@ -1,8 +1,9 @@
 .testimonial {
 	background-color: white;
+	max-width: 30rem;
 	color: black;
 	border-radius: 2rem;
-	padding: 1rem;
+	padding: 1rem 2rem;
 }
 
 .testimonial img {
@@ -15,12 +16,16 @@
 }
 
 .name {
+	text-align: center;
 	font-size: 1.3rem;
 }
 
 .testimonyRow {
 	padding: 0;
 	align-items: center;
+	gap: 0.2rem 1rem;
+	flex-wrap: wrap;
+	justify-content: center;
 }
 
 .right {

src/styles/Testimonials.css

@@ -7,7 +7,8 @@
 }
 
 .testimonialRow {
-	width: 70%;
+	justify-content: center;
+	flex-wrap: wrap;
 }
 
 .testimonials h2 {