gawa/blog/templates/blog/browse.html

@@ -110,7 +110,6 @@
         </div>
         <div class="row mb-5">
             <div class="container-fluid p-0 w-100 h-100">
-                <div class="row gap-3">
                 {% if is_empty %}
                     <div class="text-center">
                         <img src="/media/img/http/404.svg"
@@ -120,8 +119,9 @@
                         <h2 class="display-5">{% trans "No posts found for your filters." %}</h2>
                     </div>
                 {% else %}
+                    <div class="row gap-3 cardrow">
                         {% for post in posts %}
-                            <div class="card col mx-auto my-2 py-2" style="min-width: 400px;">
+                            <div class="card col mx-auto my-2 py-2">
                                 <a class="text-reset link-offset-2 link-underline link-underline-opacity-0"
                                    href=" {% url 'blog:post' post.category.slug post.slug %}">
                                     <img src="{{ post.thumbnail.url }}"
@@ -173,9 +173,9 @@
                                 </a>
                             </div>
                         {% endfor %}
+                    </div>
                 {% endif %}
             </div>
         </div>
     </div>
-    </div>
 {% endblock main %}

gawa/blog/templates/blog/featured.html

@@ -3,7 +3,7 @@
 {% get_current_language as LANGUAGE_CODE %}
 <div class="container-lg mt-5">
     <h4 class="">{% trans "Featured" %}</h4>
-    <div class="row row-cols-6 gap-1">
+    <div class="row gap-1 cardrow">
         {% for post in featured_posts %}
             <div class="card col mx-auto my-2">
                 <a class="text-reset link-offset-2 link-underline link-underline-opacity-0"

gawa/static/custom.js

@@ -58,3 +58,10 @@ document.querySelectorAll(".reset-empty-button").forEach((element) => {
     element.form.reset();
   };
 });
+
+// smaller cards depending on viewport
+document.querySelectorAll(".cardrow").forEach((element) => {
+  var level = Math.min(Math.floor(screen.width / 200), 6);
+  console.log(level);
+  element.classList.add("row-cols-" + level);
+});