UI errors fixed

atharva-kakarot · Jul 1, 2024 · 496f2d8 · 496f2d8
1 parent d1d76a6
commit 496f2d8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/css/index.css b/css/index.css
@@ -136,6 +136,17 @@ body {
     text-align: center;
 }
 
+.airing-now-anime-title {
+    max-width: 250px;
+    left: 0;
+    right: 0;
+    margin: auto;
+    font-size: 20px;
+    font-weight: 600;
+    font-family: 'Quicksand';
+    margin-top: 10px;
+}
+
 .image {
     width: 207px;
     height: 270px;
@@ -180,8 +191,8 @@ body {
 #popular-anime-container,
 #upcoming-anime-container {
     margin-top: 100px;
-    display: grid;
-    grid-auto-flow: column;
+    display: flex;
+    grid-auto-flow: row;
     contain: content;
     width: 100%;
     overflow: hidden;
@@ -206,6 +217,7 @@ body {
     border-radius: 10px;
     cursor: pointer;
     transition: 0.5s;
+    width: fit-content;
 }
 
 .airing-now-anime-cards:hover {
@@ -691,11 +703,15 @@ body {
         height: 50px;
     }
 
-    .anime-title {
+    .anime-title, .airing-now-anime-title {
         margin: 0px;
         font-size: 30px;
     }
 
+    .airing-now-anime-title {
+        max-width: 380px;
+    }
+
     #popular-anime-header,
     #top-anime-header,
     #trailer-header,

diff --git a/js/index.js b/js/index.js
@@ -590,7 +590,7 @@ function homePageDiv() {
             const details = document.createElement("div");
             details.classList.add("airing-now-anime-details");
             details.innerHTML = `
-                    <p class="anime-title">${anime.title.romaji}</p>
+                    <p class="airing-now-anime-title">${anime.title.romaji}</p>
                     <table class="airing-now-details-table">
                     <tr>
                         <td>Score:</td>