Improving responsive design of 99 bottles

JohnGinnane · Apr 13, 2024 · 5bdccb6 · 5bdccb6
1 parent 0cde833
commit 5bdccb6
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 5 deletions.
diff --git a/labs/lab9/99-bottles.html b/labs/lab9/99-bottles.html
@@ -24,8 +24,8 @@ <h1 id="lab9-title" class="display-1">99 Bottles of Beer</h1>
                 </div>
 
                 <!-- Main Body -->
-                <div class="row justify-content-evenly flex-grow-1 col-4">
-                    <div id="99-bottles-column" class="mx-auto">
+                <div class="row justify-content-center align-items-center flex-grow-1" style="padding-bottom: 50px">
+                    <div id="ninetynine-bottles-column" class="col-sm-8 col-lg-4  col-12  my-auto justify-content-evenly">
                         <!-- Content will be loaded using javascript -->
                     </div>
                 </div>

diff --git a/scripts/99-bottles.js b/scripts/99-bottles.js
@@ -1,5 +1,5 @@
 document.addEventListener('DOMContentLoaded', function(){ 
-    let body = document.getElementById("lab9-column");
+    let body = document.getElementById("ninetynine-bottles-column");
     let newLine = "";
     let originalBottles = 99;
     let bottles = originalBottles;

diff --git a/styles/style.css b/styles/style.css
@@ -252,9 +252,8 @@
     padding-bottom: 10px;
 }
 
-#99-bottles-column {
+#ninetynine-bottles-column {
     border-left: 5px solid navy;
-    width: 500px;
     font-size: 18px;
     margin-bottom: 50px;
 }