diff --git a/archivebox/templates/core/snapshot.html b/archivebox/templates/core/snapshot.html
index 58dbe756..3524dd3a 100644
--- a/archivebox/templates/core/snapshot.html
+++ b/archivebox/templates/core/snapshot.html
@@ -78,52 +78,82 @@
                 <div class="row header-bottom-frames">
                     <div class="col-sm-6 col-lg-2">
                         <div class="card">
-                            <div class="card-body">
-                                <a href="{{singlefile_path}}" title="Open in new tab..." target="_blank" rel="noopener">
-                                    <p class="card-text"><code>./singlefile.html</code></p>
-                                </a>
-                                <a href="{{singlefile_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Chrome &gt; SingleFile</h4></a>
+                            <div class="card-body row">
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{singlefile_path}}" title="Open in new tab..." target="_blank" rel="noopener">
+                                        <p class="card-text"><code>./singlefile.html</code></p>
+                                    </a>
+                                </div>
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{singlefile_path}}" target="preview">
+                                        <h4 class="card-title" style="font-size: 14px">Chrome &gt; SingleFile</h4>
+                                    </a>
+                                </div>
                             </div>
                         </div>
                     </div>
                     <div class="col-sm-6 col-lg-2">
                         <div class="card">
-                            <div class="card-body">
-                                <a href="{{pdf_path}}" title="Open in new tab..." target="_blank" rel="noopener">
-                                    <p class="card-text"><code>./output.pdf</code></p>
-                                </a>
-                                <a href="{{pdf_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Chrome &gt; PDF</h4></a>
+                            <div class="card-body row">
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{pdf_path}}" title="Open in new tab..." target="_blank" rel="noopener">
+                                        <p class="card-text"><code>./output.pdf</code></p>
+                                    </a>
+                                </div>
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{pdf_path}}" target="preview">
+                                        <h4 class="card-title" style="font-size: 14px">Chrome &gt; PDF</h4>
+                                    </a>
+                                </div>
                             </div>
                         </div>
                     </div>
                     <div class="col-sm-6 col-lg-2">
                         <div class="card">
-                            <div class="card-body">
-                                <a href="{{screenshot_path}}" title="Open in new tab..." target="_blank" rel="noopener">
-                                    <p class="card-text"><code>./screenshot.png</code></p>
-                                </a>
-                                <a href="{{screenshot_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Chrome &gt; Screenshot</h4></a>
+                            <div class="card-body row">
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{screenshot_path}}" title="Open in new tab..." target="_blank" rel="noopener">
+                                        <p class="card-text"><code>./screenshot.png</code></p>
+                                    </a>
+                                </div>
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{screenshot_path}}" target="preview">
+                                        <h4 class="card-title" style="font-size: 14px">Chrome &gt; Screenshot</h4>
+                                    </a>
+                                </div>
                             </div>
                         </div>
                     </div>
                     <div class="col-sm-6 col-lg-2">
                         <div class="card">
-                            <div class="card-body">
-                                <a href="{{archive_url}}" title="Open in new tab..." target="_blank" rel="noopener">
-                                    <p class="card-text"><code>./{{domain}}</code></p>
-                                </a>
-                                <a href="{{archive_url}}" target="preview"><h4 class="card-title" style="font-size: 14px">Wget &gt; HTML</h4></a>
+                            <div class="card-body row">
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{archive_url}}" title="Open in new tab..." target="_blank" rel="noopener">
+                                        <p class="card-text"><code>./{{domain}}</code></p>
+                                    </a>
+                                </div>
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{archive_url}}" target="preview">
+                                        <h4 class="card-title" style="font-size: 14px">Wget &gt; HTML</h4>
+                                    </a>
+                                </div>
                             </div>
                         </div>
                     </div>
                     {% if PREVIEW_ARCHIVE_DOT_ORG %}
                     <div class="col-sm-6 col-lg-2">
                         <div class="card">
-                            <div class="card-body">
-                                <a href="{{archive_org_path}}" title="Open in new tab..." target="_blank" rel="noopener">
-                                    <p class="card-text"><code>🌐 archive.org/...</code></p>
-                                </a>
-                                <a href="{{archive_org_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Archive.Org</h4></a>
+                            <div class="card-body row">
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{archive_org_path}}" title="Open in new tab..." target="_blank" rel="noopener">
+                                        <p class="card-text"><code>🌐 archive.org/...</code></p>
+                                    </a>
+                                </div>
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{archive_org_path}}" target="preview">
+                                        <h4 class="card-title" style="font-size: 14px">Archive.Org</h4>
+                                    </a>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -131,75 +161,115 @@
                     {% if PREVIEW_ORIGINALS %}
                     <div class="col-sm-6 col-lg-2">
                         <div class="card">
-                            <div class="card-body">
-                                <a href="{{url}}" title="Open in new tab..." target="_blank" rel="noopener" referrerpolicy="no-referrer">
-                                    <p class="card-text"><code>🌐 {{domain}}</code></p>
-                                </a>
-                                <a href="{{url}}" target="preview" referrerpolicy="no-referrer">
-                                    <h4 class="card-title" style="font-size: 14px">Original</h4>
-                                </a>
+                            <div class="card-body row">
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{url}}" title="Open in new tab..." target="_blank" rel="noopener" referrerpolicy="no-referrer">
+                                        <p class="card-text"><code>🌐 {{domain}}</code></p>
+                                    </a>
+                                </div>
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{url}}" target="preview" referrerpolicy="no-referrer">
+                                        <h4 class="card-title" style="font-size: 14px">Original</h4>
+                                    </a>
+                                </div>
                             </div>
                         </div>
                     </div>
                     {% endif %}
                     <div class="col-sm-6 col-lg-2">
                         <div class="card">
-                            <div class="card-body">
-                                <a href="{{headers_path}}" title="Open in new tab..." target="_blank" rel="noopener">
-                                    <p class="card-text"><code>./headers.json</code></p>
-                                </a>
-                                <a href="{{headers_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Headers</h4></a>
+                            <div class="card-body row">
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{headers_path}}" title="Open in new tab..." target="_blank" rel="noopener">
+                                        <p class="card-text"><code>./headers.json</code></p>
+                                    </a>
+                                </div>
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{headers_path}}" target="preview">
+                                        <h4 class="card-title" style="font-size: 14px">Headers</h4>
+                                    </a>
+                                </div>
                             </div>
                         </div>
                     </div>
                     <div class="col-sm-6 col-lg-2">
                         <div class="card">
-                            <div class="card-body">
-                                <a href="{{dom_path}}" title="Open in new tab..." target="_blank" rel="noopener">
-                                    <p class="card-text"><code>./output.html</code></p>
-                                </a>
-                                <a href="{{dom_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Chrome &gt; HTML</h4></a>
+                            <div class="card-body row">
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{dom_path}}" title="Open in new tab..." target="_blank" rel="noopener">
+                                        <p class="card-text"><code>./output.html</code></p>
+                                    </a>
+                                </div>
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{dom_path}}" target="preview">
+                                        <h4 class="card-title" style="font-size: 14px">Chrome &gt; HTML</h4>
+                                    </a>
+                                </div>
                             </div>
                         </div>
                     </div>
                     <div class="col-sm-6 col-lg-2">
                         <div class="card">
-                            <div class="card-body">
-                                <a href="{{readability_path}}" title="Open in new tab..." target="_blank" rel="noopener">
-                                    <p class="card-text"><code>./readability/content.html</code></p>
-                                </a>
-                                <a href="{{readability_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Readability</h4></a>
+                            <div class="card-body row">
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{readability_path}}" title="Open in new tab..." target="_blank" rel="noopener">
+                                        <p class="card-text"><code>./readability/content.html</code></p>
+                                    </a>
+                                </div>
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{readability_path}}" target="preview">
+                                        <h4 class="card-title" style="font-size: 14px">Readability</h4>
+                                    </a>
+                                </div>
                             </div>
                         </div>
                     </div>
                     <br/>
                     <div class="col-sm-6 col-lg-2">
                         <div class="card">
-                            <div class="card-body">
-                                <a href="{{mercury_path}}" title="Open in new tab..." target="_blank" rel="noopener">
-                                    <p class="card-text"><code>./mercury/content.html</code></p>
-                                </a>
-                                <a href="{{mercury_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Mercury</h4></a>
+                            <div class="card-body row">
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{mercury_path}}" title="Open in new tab..." target="_blank" rel="noopener">
+                                        <p class="card-text"><code>./mercury/content.html</code></p>
+                                    </a>
+                                </div>
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{mercury_path}}" target="preview">
+                                        <h4 class="card-title" style="font-size: 14px">Mercury</h4>
+                                    </a>
+                                </div>
                             </div>
                         </div>
                     </div>
                     <div class="col-sm-6 col-lg-2">
                         <div class="card">
-                            <div class="card-body">
-                                <a href="{{media_path}}" title="Open in new tab..." target="_blank" rel="noopener">
-                                    <p class="card-text"><code>./media/*.mp4</code></p>
-                                </a>
-                                <a href="{{media_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Media</h4></a>
+                            <div class="card-body row">
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{media_path}}" title="Open in new tab..." target="_blank" rel="noopener">
+                                        <p class="card-text"><code>./media/*.mp4</code></p>
+                                    </a>
+                                </div>
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{media_path}}" target="preview">
+                                        <h4 class="card-title" style="font-size: 14px">Media</h4>
+                                    </a>
+                                </div>
                             </div>
                         </div>
                     </div>
                     <div class="col-sm-6 col-lg-2">
                         <div class="card">
-                            <div class="card-body">
-                                <a href="{{git_path}}" title="Open in new tab..." target="_blank" rel="noopener">
-                                    <p class="card-text"><code>./git/*.git</code></p>
-                                </a>
-                                <a href="{{git_path}}" target="preview"><h4 class="card-title" style="font-size: 14px">Git</h4></a>
+                            <div class="card-body row">
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{git_path}}" title="Open in new tab..." target="_blank" rel="noopener">
+                                        <p class="card-text"><code>./git/*.git</code></p>
+                                    </a>
+                                </div>
+                                <div class="col-6 col-sm-12">
+                                    <a href="{{git_path}}" target="preview">
+                                        <h4 class="card-title" style="font-size: 14px">Git</h4>
+                                    </a>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -214,7 +284,7 @@
                      allow-scripts
                      allow-top-navigation-by-user-activation
                      allow-top-navigation-to-custom-protocols"
-            class="full-page-iframe d-none d-sm-block"
+            class="full-page-iframe"
         ></iframe>
     </body>
 </html>
diff --git a/public/static/snapshot.css b/public/static/snapshot.css
index 50bd2272..6da1ea54 100644
--- a/public/static/snapshot.css
+++ b/public/static/snapshot.css
@@ -27,7 +27,6 @@ header a:hover {
     margin: 0px;
     text-align: center;
     color: #f6f6f6;
-    font-size: calc(10px + 0.84vw);
     font-weight: 200;
     padding: 3px 4px;
     background-color: #aa1e55;
@@ -44,7 +43,6 @@ header small code {
     white-space: nowrap;
     font-weight: 200;
     display: block;
-    margin-top: -1px;
     font-size: 13px;
     opacity: 0.8;
     user-select: all;
@@ -80,11 +78,7 @@ header small code {
 }
 .card-body {
     font-size: 14px;
-    padding: 13px 10px;
-    padding-bottom: 1px;
-    /* padding-left: 3px; */
-    /* padding-right: 3px; */
-    /* padding-bottom: 3px; */
+    padding: 2px 0 4px 0;
     line-height: 1;
     word-wrap: break-word;
     max-height: 102px;
@@ -93,6 +87,9 @@ header small code {
     background-color: #1a1a1a;
     color: #d3d3d3;
 }
+.card-body > .col-6.col-sm-12 {
+    margin: 3px 0;
+}
 .card-title {
     margin-bottom: 4px;
 }
@@ -161,7 +158,6 @@ img.external:hover {
     display: inline-block;
     color: #d3d3d3;
     font-weight: 200;
-    vertical-align: 3px;
 }
 .header-bottom-frames .card-text {
     width: 100%;
@@ -169,7 +165,6 @@ img.external:hover {
     font-size: 0.9em;
     display: inline-block;
     position: relative;
-    top: -11px;
 }
 .card-text code {
     padding: .2rem .4rem;