remove padding from left and right limiting text (cards)

SurajBhari · Jul 2, 2024 · 1bc8638 · 1bc8638
1 parent 7e43c0b
commit 1bc8638
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/static/style.css b/static/style.css
@@ -466,4 +466,11 @@ input[type="password"]:focus {
   border: 0;
   cursor: pointer;
   font-weight: bold;
+}
+
+
+.card-no-left-right-padding{
+  padding: 0;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
 }
diff --git a/templates/home.html b/templates/home.html
@@ -33,7 +33,7 @@
                     <a href="{{ channel['link'] }}">
                         <div class="card noborder">
                             <img class="card-img-top rounded" src="{{ channel['image'] }}" alt="Card image cap" load="lazy">
-                            <div class="card-body">
+                            <div class="card-body card-no-left-right-padding">
                                 {% if channel['deleted'] %}
                                 <h6 class="card-title" id="{{ channel['id'] }}"> DELETED CHANNEL ( {{ channel['id'] }} )</h6>
                                 {% else %}
@@ -48,7 +48,7 @@ <h6 class="card-title" id="{{ channel['id'] }}">{{ channel['name'] }}</h6>
                 <a href="#a" onclick="set_all()">
                     <div class="card noborder">
                         <img class="card-img-top rounded" src="/static/right.png" alt="Card image cap" load="lazy">
-                        <div class="card-body">
+                        <div class="card-body card-no-left-right-padding">
                             <h6 class="card-title"> See More </h6>
                         </div>
                     </div>

diff --git a/templates/layout.html b/templates/layout.html
@@ -157,10 +157,10 @@
                 new_html = "";
                 for(var i=0; i < data.length; i++){
                     if(data[i].name.includes(("deleted channel"))){
-                        new_html += '<div class="col-3"><div class="card noborder"><img class="card-img-top rounded" src="' + data[i].image + '" alt="Card image cap"><div class="card-body"><h6 class="card-title" id="' + data[i].id +'"> DELETED CHANNEL ( ' + data[i].id + ' )</h6></div></div></div>';
+                        new_html += '<div class="col-3"><div class="card noborder"><img class="card-img-top rounded" src="' + data[i].image + '" alt="Card image cap"><div class="card-body card-no-left-right-padding"><h6 class="card-title" id="' + data[i].id +'"> DELETED CHANNEL ( ' + data[i].id + ' )</h6></div></div></div>';
                     }
                     else{  
-                        new_html += '<div class="col-3"><a href="' + data[i].link + '"><div class="card noborder"><img class="card-img-top rounded" src="' + data[i].image + '" alt="Card image cap"><div class="card-body"><h6 class="card-title" id="' + data[i].id +'">' + data[i].name + '</h6></div></div></a></div>';
+                        new_html += '<div class="col-3"><a href="' + data[i].link + '"><div class="card noborder"><img class="card-img-top rounded" src="' + data[i].image + '" alt="Card image cap"><div class="card-body card-no-left-right-padding"><h6 class="card-title" id="' + data[i].id +'">' + data[i].name + '</h6></div></div></a></div>';
                     }
                 }
                 document.getElementById("clips-container").innerHTML = new_html;