fix tags render on mobile

Signed-off-by: Arhell <arhell333@gmail.com>
getporter · Apr 12, 2023 · d0aee10 · d0aee10
1 parent ceacf06
commit d0aee10
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/docs/themes/porter/assets/sass/helm-blog.scss b/docs/themes/porter/assets/sass/helm-blog.scss
@@ -113,18 +113,30 @@
 
           .blog-tags {
             position: relative;
-            padding: 1rem 2rem;
+            padding: .5rem 2rem 4rem;
             min-height: 12rem;
+            @media only screen and (max-width: 569px) {
+              padding: .5rem 1rem 4rem;
+            }
             a.tag {
               font-size: 1.25rem;
               border-radius: 2rem;
               background: $blue;
               color: white;
-              padding: 0.5rem 1.5rem;
-              margin: 2.25rem 0.25rem;
+              padding: 0.2rem 1.5rem;
+              margin: 0.25rem;
               font-weight: bold;
               text-transform: uppercase;
               letter-spacing: 0.075em;
+              @media only screen and (max-width: 569px) {
+                font-size: 1rem;
+              }
+            }
+
+            > div {
+              display: flex;
+              align-items: center;
+              flex-wrap: wrap;
             }
           }
 

diff --git a/docs/themes/porter/layouts/partials/tags.html b/docs/themes/porter/layouts/partials/tags.html
@@ -1,7 +1,7 @@
 <div id="tags">
     {{ $taxo := "tags" }} <!-- Use the plural form here -->
     {{ with .Param $taxo }}
-    Tags:
+    Tags:&nbsp;
         {{ range $index, $tag := . }}
             {{- if gt $index 0 }}{{ end -}}{{ with $.Site.GetPage (printf "/%s/%s" $taxo $tag) -}}<a href="{{ .Permalink }}" class="tag">{{ $tag }}</a>{{- end -}}
         {{- end -}}