diff --git a/static/style.css b/static/style.css
index 6af6de1c..ba5230e5 100644
--- a/static/style.css
+++ b/static/style.css
@@ -108,7 +108,7 @@ pre .value, code .value, code.value {
 	background-color: #23527c90;
 }
 
-.i-label {
+.text-outline {
   text-shadow: -2px -2px 0 var(--bg), 2px -2px 0 var(--bg), -2px 2px 0 var(--bg), 2px 2px 0 var(--bg);
   /* this is easier and supported in major browsers but draws the outline *inside*
   the text, not outside, which looks much worse.
@@ -145,11 +145,9 @@ pre .value, code .value, code.value {
 }
 
 .front-buttons {
-  text-align: left;
-  margin-left: 2em;
   /* vertical center button groups against left side text */
-  display: flex;
-  align-items: center;
+  /* display: flex; */
+  /* align-items: center; */
 }
 
 #front-tagline {
@@ -157,8 +155,10 @@ pre .value, code .value, code.value {
   text-shadow: 0px 0px .5em white, 2px 2px .5em yellow, -2px -2px .5em red;
 }
 
-.front-buttons > span {
-  text-align: right;
+@media (min-width: 992px) {  /* @screen-md-min */
+  .front-buttons > div:first-child {
+    text-align: right;
+  }
 }
 
 .front-buttons label {
@@ -171,6 +171,11 @@ pre .value, code .value, code.value {
   margin-top: -.2em;
 }
 
+.front-buttons .btn {
+  float: none;  /* separate buttons */
+  border-radius: .2em !important;
+}
+
 .btn.web, .btn.web:hover, .btn.web:focus, .btn.web.active {
   background-color: #20593c;
   border: 2px solid #47c986;
@@ -251,11 +256,6 @@ pre .value, code .value, code.value {
   opacity: 70%;
 }
 
-.front-buttons .btn-group > .btn {
-  float: none;  /* separate buttons */
-  border-radius: .2em !important;
-}
-
 #front-logo-bottom {
   padding-bottom: 0;
   margin-bottom: -1em;
@@ -435,6 +435,10 @@ button[disabled]:hover {
   vertical-align: middle;
 }
 
+.btn-group {
+  white-space: nowrap;
+}
+
 .btn {
   white-space: normal;
 }
diff --git a/templates/base.html b/templates/base.html
index 99536a1e..d4848b3f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -20,7 +20,6 @@
 </head>
 
 <body id="{{ body_id }}">
-
 {% with messages = get_flashed_messages() %}
 {% if messages %}
   <div id="messages">
diff --git a/templates/index.html b/templates/index.html
index c07ffb96..b3a372c7 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -17,56 +17,52 @@ bluesky light blue
 
 <div id="front-tagline" class="row bigger">
   <!-- The decentralized social bridge -->
-  <em class="front-form-text">Bridging the new social internet</em>
+  <em class="front-form-text">
+    Bridging the new <br class="visible-xs-inline"> social internet
+  </em>
 </div>
 
-<div id="front-me" class="row front-buttons">
-<span class="col-sm-4 bigger">
-  <span class="i-label">I'm on</span>
-</span>
-<div class="col-sm-8 big">
+<div id="front-me" class="row front-buttons"
+     role="group" data-toggle="buttons" aria-label="I'm on">
+  <div class="col-md-3 bigger text-outline">
+    I'm on
+  </div>
+
   <!--
     -- Separated buttons
     -->
-  <div class="btn-group visible-md-block visible-lg-block"
-       role="group" data-toggle="buttons" aria-label="I'm on">
+  <div class="btn-group col-md-8 big">
   <label for="me-web" class="btn btn-primary web">
     <!-- autocomplete="off" prevents Firefox from preserving these buttons' state
          https://github.com/twbs/bootstrap/issues/793
       -->
     <input name="me" id="me-web" type="radio" autocomplete="off">
-    🌐 <!-- globe_with_meridians -->
-    <!-- 🌏 globe_showing_asia-australia -->
-    Web
+    🌐 Web
   </label>
   <label for="me-fediverse" class="btn btn-primary fediverse">
     <input name="me" id="me-fediverse" type="radio" autocomplete="off">
     <img src="/static/fediverse_logo.svg">
     Fediverse
   </label>
-  <label for="me-atproto" class="btn btn-primary atproto disabled"
-         title="Coming soon">
-    <!-- <input name="me" id="me-atproto" type="radio" autocomplete="off"> -->
+  <br class="visible-xs-inline">
+  <label for="me-atproto" class="btn btn-primary disabled atproto" title="Coming soon">
     <img src="/static/atproto_logo.png">
     Bluesky
   </label>
-  <label for="me-nostr" class="btn btn-primary nostr disabled"
-         title="Coming soon">
-    <!-- <input name="me" id="me-nostr" type="radio" autocomplete="off"> -->
+  <label for="me-nostr" class="btn btn-primary disabled nostr" title="Coming soon">
     <img src="/static/nostr_logo_transparent.png">
     Nostr
   </label>
-</div>
-</div>
+  </div>
 </div>
 
-<div id="front-them" class="row front-buttons">
-<span class="col-sm-4 bigger">
-  <span class="i-label">I want to follow someone on</span>
-</span>
-<div class="col-sm-8 big">
-<div class="btn-group" role="group" data-toggle="buttons"
-     aria-label="...and I want to follow someone on">
+<div id="front-them" class="row front-buttons"
+     role="group" data-toggle="buttons" aria-label="I want to follow someone on">
+  <div class="col-md-3 bigger text-outline">
+    I want to follow <br class="visible-xs-inline"> someone on
+  </div>
+
+  <div class="btn-group col-md-8 big">
   <label for="them-web" class="btn btn-primary web">
     <input name="them" id="them-web" type="radio" autocomplete="off">
     🌐 Web
@@ -76,21 +72,18 @@ bluesky light blue
     <img src="/static/fediverse_logo.svg">
     Fediverse
   </label>
-  <label for="them-atproto" class="btn btn-primary atproto disabled"
-         title="Coming soon">
-    <!-- <input name="them" id="them-atproto" type="radio" autocomplete="off"> -->
+  <br class="visible-xs-inline">
+  <label for="them-atproto" class="btn btn-primary disabled atproto" title="Coming soon">
     <img src="/static/atproto_logo.png">
     Bluesky
   </label>
-  <label for="them-nostr" class="btn btn-primary nostr disabled"
-         title="Coming soon">
-    <!-- <input name="them" id="them-nostr" type="radio" autocomplete="off"> -->
+  <label for="them-nostr" class="btn btn-primary disabled nostr" title="Coming soon">
     <img src="/static/nostr_logo_transparent.png">
     Nostr
   </label>
+  </div>
 </div>
-</div>
-</div>
+
 </div> <!-- front-form -->
 
 <div id="front-instructions" class="row big front-light">
