diff --git a/themes/default/static/css/goblog.css b/themes/default/static/css/goblog.css
index a619766a..2b158e8a 100644
--- a/themes/default/static/css/goblog.css
+++ b/themes/default/static/css/goblog.css
@@ -33,7 +33,10 @@ body { font-family: 'Source Code Pro', monospace; min-height:100vh; display:flex
 .bottom { min-height: 200px; width: 100%; background-color: #333333; color: #EEE; }
 .bottom a { color: #EEE; }
 /* text animation */
-@keyframes animated-text{  from{width: 0;} to{width: 350px;} }
+/* percentages of the fit-content wrapper, so the line types out to the full length of whatever site_tags holds */
+@keyframes animated-text{  from{width: 0%;} to{width: 100%;} }
+/* too narrow for one line: wrap instead of typing, which would clip */
+@media (max-width: 600px) { .keywords { white-space: normal; animation: none; border-right: 0; } }
 /* cursor animations */
 @keyframes animated-cursor{ from{border-right-color: rgba(0,0,0,.75);} to{border-right-color: transparent;}  }
 
diff --git a/themes/default/templates/home.html b/themes/default/templates/home.html
index 03fd4fa8..cbf17a9d 100644
--- a/themes/default/templates/home.html
+++ b/themes/default/templates/home.html
@@ -4,7 +4,7 @@
       <a href="/posts" title="Read posts by {{ .settings.site_title.Value }}"><img src="{{ .settings.landing_page_image.Value }}" class="rounded-circle img-responsive profile" style="max-width:300px;" alt="{{ .settings.site_title.Value }}"/></a>
       <h1>{{ .settings.site_title.Value }}</h1>
       <h4>{{ .settings.site_subtitle.Value }}</h4>
-      <div style="width: 355px; margin: auto;">
+      <div style="width: fit-content; max-width: 100%; margin: auto;">
         <p class="keywords">
           {{ .settings.site_tags.Value }}
         </p>