feat: Update image grid styles for better responsiveness and add marg…

…in utility class
drikusroor · Oct 11, 2024 · 8e93bab · 8e93bab
1 parent 1113f67
commit 8e93bab
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/blog/templates/blog/includes/image-grid.html b/src/blog/templates/blog/includes/image-grid.html
@@ -4,7 +4,7 @@
 <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
     {% for picture in page.gallery_images.all %}
         <div id="{{forloop.counter0}}" class="open-image-modal bg-white rounded-xl overflow-hidden drop-shadow group hover:rotate-3 transition-transform relative cursor-pointer" >
-            {% image picture.image fill-1920x1080-c100 %}
+            {% image picture.image fill-960x540-c100 class="h-full w-full object-cover my-0" %}
             <div class="image-caption text-lg md:text-sm p-2 font-semibold header-text-color w-full h-full absolute hidden top-0 flex-col justify-end bg-gradient-to-t to-transparent from-yellow-500" id="{{forloop.counter0}}">
                 {{picture.caption}}
             </div>

diff --git a/src/brazil_blog/static/css/brazil_blog_compiled.css b/src/brazil_blog/static/css/brazil_blog_compiled.css
@@ -1524,6 +1524,11 @@ select {
   margin-right: auto;
 }
 
+.my-0 {
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;