add responsiveness

public/css/style.css

@@ -23,7 +23,7 @@ body {
 }
 
 #banner {
-	max-width: 40%;
+	max-width: 80%;
 }
 
 #navbar {

src/client/Banner.tsx

@@ -49,7 +49,7 @@ export default function Banner(
 					className='container-fluid p-0'
 					style={colorLayer}>
 					<div
-						className='jumbotron container text-white px-0'
+						className='jumbotron container text-white my-4 px-0'
 						id='banner'
 						style={jumbotronStyle}>
 						<h1 className='display-4 font-weight-bold'>{title}</h1>

src/client/Footer.tsx

@@ -22,11 +22,11 @@ export default function Footer(
 	{elements}: FooterProps) {
 	return (
 		<React.Fragment>
-			<div className='container w-50 py-5 d-flex justify-content-between'>
+			<div className='container
+				py-5 d-flex flex-wrap justify-content-between'>
 				{elements.map((elem, index) =>
 					<div
 						key={index}
-						id='imagewithdescription'
 						className='align-top'>
 						<h3 className='font-weight-bold'>
 							{elem.title}

src/client/ImagesWithDescription.tsx

@@ -17,7 +17,8 @@ export default function ImagesWithDescription(
 	{images}: imagesWithDescriptionProps) {
 	return (
 		<React.Fragment>
-			<div className='container w-50 py-5 d-flex justify-content-between'>
+			<div className='container
+				py-5 d-flex flex-wrap justify-content-between'>
 				{images.map((elem, index) =>
 					<div
 						key={index}

src/client/Navbar.tsx

@@ -17,7 +17,8 @@ interface NavbarProps {
 export default function Navbar({setStatus, main, sub}: NavbarProps) {
 	return (
 		<React.Fragment>
-			<div className='navbar navbar-expand-lg navbar-light'>
+			<div className='navbar fixed-top
+				navbar-expand-lg navbar-light bg-light'>
 				<div
 					className='container'
 					id='navbar'>

src/client/Quote.tsx

@@ -22,12 +22,12 @@ export default function Quote(
 				style={containerStyle}>
 				<div
 					className='container
-						w-75 d-flex justify-content-center align-items-center'>
+						justify-content-center align-items-center'>
-					<blockquote className="blockquote mx-5">
+					<blockquote className="blockquote">
 						<p className="mb-0">{quote}</p>
 						<footer className="blockquote-footer">{author}</footer>
 					</blockquote>
-					<div className='lead w-25 mx-5'>{description}</div>
+					<div className='lead'>{description}</div>
 				</div>
 			</div>
 		</React.Fragment>