diff --git a/openlibrary/templates/site/alert.html b/openlibrary/templates/site/alert.html
index 103c78dd249..ded13830ec9 100644
--- a/openlibrary/templates/site/alert.html
+++ b/openlibrary/templates/site/alert.html
@@ -10,8 +10,8 @@
     <div class="iaBar">
         <a class="iaLogo" href="https://archive.org"><img alt="$_('Internet Archive logo')" src="/static/images/ia-logo.svg" width="160"></a>
         $# detect-missing-i18n-skip-line
-        <a class="ghost-btn" href="https://archive.org/donate/?platform=ol&origin=olwww-TopNavDonateButton" data-ol-link-track="IABar|DonateButton">$_('Donate') <span class="heart" aria-hidden="true">♥</span></a>
-      <div class="language-component header-dropdown">
+        <a class="ghost-btn iabar-mobile" href="https://archive.org/donate/?platform=ol&origin=olwww-TopNavDonateButton" data-ol-link-track="IABar|DonateButton">$_('Donate') <span class="heart" aria-hidden="true">♥</span></a>
+        <div class="language-component header-dropdown iabar-mobile">
         <details>
           <summary>
             <span>$active_ui_lang['localized'] ($active_ui_lang['code'])</span>
diff --git a/static/css/components/iaBar.less b/static/css/components/iaBar.less
index e832b043e16..e0102507257 100644
--- a/static/css/components/iaBar.less
+++ b/static/css/components/iaBar.less
@@ -50,4 +50,15 @@
   .topNotice-logo {
     font-size: 24px;
   }
+
+  @media only screen and (max-width: @width-breakpoint-mobile) {
+    .iabar-mobile {
+      font-size: .9em;
+    }
+    .ghost-btn.iabar-mobile {
+      padding: 5px 7px;
+      margin-right: 10px;
+      margin-left: 10px;
+    }
+  }
 }