Fix Card layout bug #3

halfrost · Oct 21, 2020 · c0084a5 · c0084a5
1 parent 9cb2a9c
commit c0084a5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
@@ -0,0 +1,22 @@
+.project-card-image {
+  width: 100%;
+  height: calc(33.3% - 2*20px); /* Fluid 3 columns (inc. 20px gutter) */
+}
+
+.project-card-image-auto {
+  width: 100%;
+  height: auto;
+}
+
+@media screen and (max-width: 1199px) {
+  .project-card-image {
+    width: 100%;
+    height: calc(50% - 20px); /* Fluid 2 columns (inc. 20px gutter) */
+  }
+}
+@media screen and (max-width: 768px) {
+  .project-card-image {
+    width: 100%;
+    height: 100%; /* 1 column */
+  }
+}
diff --git a/layouts/partials/portfolio_li_card.html b/layouts/partials/portfolio_li_card.html
@@ -22,7 +22,7 @@
     {{ with $resource }}
     {{ $image := .Resize (printf "550x q90 %s") }}
     <a href="{{ $link }}" {{ $target | safeHTMLAttr }} class="card-image hover-overlay">
-      <img data-src="{{ $image.RelPermalink }}" alt="" class="img-responsive lazyload">
+      <img data-src="{{ $image.RelPermalink }}" alt="" class="img-responsive lazyload project-card-image-auto">
     </a>
     {{ end }}
     <div class="card-text">