Made some styling changes for responsive design.

DiksonIvySon · Jan 19, 2024 · 776b1f2 · 776b1f2
1 parent ec1d0a5
commit 776b1f2
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 27 deletions.
diff --git a/src/App.css b/src/App.css
@@ -259,19 +259,22 @@ img {
 
 .main-tittle h1 {
   font-size: 20pt;
+  font-family: 'Times New Roman', Times, serif;
 }
 
 .card {
-  width: 370px;
-  height: 360px;
-  background-color: #EDEFEE;
+  min-width: 310px;
+  max-width: 500px;
+  height: 400px;
+  background-color: #495E57;
   border-radius: 15px 15px 0px 0px ;
   margin-bottom: 20px;
+  flex: 1;
 }
 
 .card-image {
-  width: 370px;
-  height: 220px;
+  width: 100%;
+  height: 240px;
   border-radius: 15px 15px 0px 0px;
 }
 
@@ -292,31 +295,26 @@ img {
 
 .card-tittle h4 {
   font-size: 20px;
-  margin: 5px 0px;
+  margin: 5px 10px;
 }
 
 .card .card-price {
   color: burlywood;
 }
 
 .card .card-description {
-  margin: 10px;
+  margin: 10px 20px;
   font-size: 11pt;
 }
 
-.card .card-delivery {
-  margin: 10px;
-  padding-bottom: 10px;
-}
-
 .card .card-delivery:hover {
   color: #F4CE14;
   cursor: pointer;
 }
 
 .food-card {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
   flex-wrap: wrap;
   gap: 30px;
 }
@@ -328,6 +326,7 @@ img {
 /* Styling the food menu */
 .foodItem-container {
   max-width: 500px;
+  min-width: 300px;
   margin: 10px;
   border: 2px solid burlywood;
   border-radius: 20px;
@@ -383,7 +382,7 @@ img {
 }
 
 .foodItem-description {
-  width: 300px;
+  max-width: 300px;
   margin: 0;
 }
 
@@ -402,8 +401,9 @@ img {
 .menu .traditional-menu {
   margin: 40px auto;
   max-width: 1100px;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
 }
 
 .menu h2 {
@@ -414,11 +414,15 @@ img {
 
 .dessertsAndBreakfast {
   margin: 40px auto;
+  min-width: 300px;
   max-width: 1100px;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
 }
 
+
+
 /**/
 .signatureDish-container {
   max-width: 300px;
@@ -468,7 +472,8 @@ img {
 }
 
 .menu .SignatureDish-menu {
-  margin: 40px 0px 80px 0px;
+  margin-top: 40px;
+  margin-bottom: 80px;
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;

diff --git a/src/Components/specials.js b/src/Components/specials.js
@@ -40,7 +40,6 @@ function FoodCard({foods}) {
             <p className="card-description">
                 {foods.description}  
             </p>
-           {/* <h5 className="card-delivery">Order a delivery </h5>*/}
         </div>
     );
 }
@@ -58,12 +57,7 @@ class Specials extends Component {
             <section className="main section-margin">
                 <div>
                     <div className="main-tittle">
-                        <div>
-                            <h1>This weeks specials!</h1>
-                        </div>
-                        <div>
-                           {/* <NavLink to="orderOnline">Order Online</NavLink>*/}
-                        </div>
+                        <h1>This weeks specials!</h1>
                     </div>
                     <div className="food-card">
                         <FoodCard foods={foodTypes.bruchetta} />

diff --git a/src/Pages/menu.js b/src/Pages/menu.js
@@ -334,7 +334,7 @@ class Menu extends Component {
                         <DrinkItem drinks={drinksType.grapetiser}/>
                         <DrinkItem drinks={drinksType.redbull}/>
                     </div>
-                    <p>
+                    <p className='section-margin'>
                         Please note that alcohol drinks are only available on seat in and no online orders.
                     </p>
                     <NavLink className='primary-btn2' to="/about">Open Alcohol Menu</NavLink>