change: responsive on mobile

ramonortegajr · May 29, 2024 · ad47ecb · ad47ecb
1 parent 2ffa955
commit ad47ecb
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 3 deletions.
diff --git a/public/css/home.css b/public/css/home.css
@@ -8,6 +8,7 @@ body {
     background-color: #f0f0f0;
     flex-wrap: wrap;
     margin-bottom: 80px;
+    margin-top: 80px;
 }
 
 footer {
@@ -16,7 +17,7 @@ footer {
     width: 100%; 
     background-color: #ffffff; 
     color: #343434; 
-    padding: 5px; 
+    padding: 1px; 
     text-align: center;
     font-family: Arial, sans-serif; 
     font-size: larger;
@@ -32,6 +33,27 @@ footer {
     transform: translateY(50%); 
 }
 
+header {
+    position: fixed; 
+    top: 0;
+    width: 100%;
+    background-color: #ffffff; 
+    color: #000000; 
+    display: flex; 
+    align-items: center;
+    padding: 8px; 
+    font-family: Arial, sans-serif; 
+}
+
+.menu-icon {
+    margin-right: 20px; 
+    cursor: pointer;
+}
+
+h1 {
+    margin: 0;
+}
+
 .container {
     display: flex;
     flex-wrap: wrap;
@@ -138,4 +160,27 @@ footer {
 
 .more-button.Book {
     background-color: #4267B2; /* Blue color like Facebook */
-}
+}
+
+/* Adjustments for mobile devices */
+@media only screen and (max-width: 768px) {
+    .container {
+        width: 100%; 
+        padding: 10px; 
+    }
+
+    .card {
+        width: 100%; 
+        margin-bottom: 10px; 
+    }
+
+    .text-section,
+    .image-section {
+        width: 100%;
+        padding: 10px; 
+    }
+
+    .text-section h1 {
+        font-size: 1.5em; 
+    }
+}
diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs
@@ -2,5 +2,5 @@
 </html>
 <footer>
     <div class="footer-line"></div>
-    <p style="font-size: 80%;">Developed with <span class="blue-heart">&#x1F499;</span> by Ram Ortega</p>
+    <p style="font-size: 80%;">Developed with <span class="blue-heart">&#x1F499;</span> by <b>Ram Ortega</b></p>
 </footer>
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
@@ -6,4 +6,9 @@
     <title><%= title %></title>
     <link rel="stylesheet" href="/css/home.css">
 </head>
+
+<header>
+    <div class="menu-icon">&#9776;</div>
+    <h1>Tools To Go</h1>
+</header>
 <body>