Solution for recipe-book overflow problem

Author: Noxtrah

scripts/recipe-book.js

@@ -131,7 +131,7 @@ async function showRecipes() {
 
             // Create recipe name (h1)
             const recipeName = document.createElement("h1");
-            recipeName.classList.add("recipe-dame");
+            recipeName.classList.add("recipe-name");
             descriptionContainer.appendChild(recipeName);
 
             // Create horizontal line (hr)

styles/recipe-book.css

@@ -98,6 +98,8 @@ a{
     font-family: 'Stint Ultra Expanded', cursive;
     font-size: 1.5em;
     text-align: center;
+    max-width:30vw;
+    word-wrap: break-word;
   }
 
   .book {
@@ -148,6 +150,8 @@ a{
     padding: 10% 10%;
     padding-top:5%;
     z-index:1;
+    word-wrap: break-word;
+    overflow-y: scroll;
   }
 
   .description h1{
@@ -157,6 +161,12 @@ a{
     line-height: 1.25em;
   }
 
+  /* .recipe-title{
+    max-width: 10vw;
+    word-wrap: break-word;
+    color:#010790
+  } */
+
   .book:hover{
     cursor: pointer;
   }

templates/recipe-book.html

@@ -28,15 +28,13 @@ <h1 id="my-recipe-book-title">Loading...</h1>
     <div class="grid-container">
 
         <div class="recipe-item">
-            <div class="book">
-                <div class="gloss"></div>
-                <img class="cover" src="../Images/background.png">
-                <div class="description">
-                    <h1 class="recipe-dame"></h1>
-                    <hr>
-                    <p class="recipe-description"></p>
-                </div>
-
+        <div class="book">
+            <div class="gloss"></div>
+            <img class="cover" src="../Images/background.png">
+            <div class="description">
+                <h1 class="recipe-name"></h1>
+                <hr>
+                <p class="recipe-description"></p>
             </div>
 
             <h1 class="recipe-title"></h1>