change: title mobile to smaller

ramonortegajr · May 30, 2024 · 6ead0cd · 6ead0cd
1 parent 7c676d6
commit 6ead0cd
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/public/css/home.css b/public/css/home.css
@@ -70,6 +70,15 @@ i {
     font-size: 20px; 
     color: black;
 }
+.container-index {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    padding: 15px;
+    width: 75%;
+    max-width: 1200px;
+}
+
 .container {
     display: flex;
     flex-wrap: wrap;
@@ -219,11 +228,26 @@ i {
         font-size: 2.0em; /* Reduce font size for smaller screens */
         text-align: center; /* Center align the title */
     }
+    .container-index {
+        width: 100%;
+        padding: 10px; 
+        margin-right: 0.5em;
+    }
+
+    .card .text-section .title-small {
+        font-size: 1.2em;
+    }
+
+    .card .text-section p {
+        font-size: small;
+        text-align: justify;
+    }
     .container {
-        width: 90%; 
+        width: 100%; 
         padding: 10px; 
         margin-right: 0.5em;
     }
+
     .support-me {
         display: none; /* Hide "Buy Me a Coffee" on smaller screens */
     }

diff --git a/views/index.ejs b/views/index.ejs
@@ -1,6 +1,6 @@
 <%- include('partials/header', { title: 'Tools To Go' }) %>
 
-<div class="container">
+<div class="container-index">
     <% const services = [
         { title: "Tube To Go", description: "Tube To Go is the ultimate solution for converting YouTube videos to MP4 format.", img: "yt.png", colorClass: "red", textColor: "#C13E3E" },
         { title: "Tik To Go", description: "Tik To Go is the ultimate solution for converting TikTok videos to MP4 format.", img: "tk.png", colorClass: "black", textColor: "#292424" },
@@ -10,7 +10,7 @@
     <% services.forEach(service => { %>
         <div class="card">
             <div class="text-section">
-                <h1 style="color: <%= service.textColor %>;"><%= service.title.replace(" ", " ") %></h1>
+                <h1 class="title-small" style="color: <%= service.textColor %>;"><%= service.title.replace(" ", " ") %></h1>
                 <% if (service.title === 'Tik To Go' || service.title === 'Face To Go' || service.title === 'MP3 To Go') { %>
                     <button class="more-button <%= service.colorClass %>" style="background-color: gray; color: white;">Soon</button>
                 <% } else { %>