diff --git a/app/static/styles.css b/app/static/styles.css
index fa59a100..91d6b8cd 100644
--- a/app/static/styles.css
+++ b/app/static/styles.css
@@ -1965,22 +1965,24 @@ form h5 {
 .render_username .author_link {
   display: inline-block;
 }
-.render_username .author_link:hover + .user_preview, .render_username .user_preview:hover {
-  display: inline-block !important;
-  position: absolute;
-  top: 17px;
-  left: 0;
-  background-color: white;
-  z-index: 20;
-}
-.render_username .user_preview .card {
-  width: 300px;
-}
-.render_username .user_preview .card .preview_avatar_image {
-  max-width: 50%;
-}
-.render_username .user_preview .card .preview_avatar_image img {
-  max-width: 100%;
+@media (min-width: 1280px) {
+  .render_username .author_link:hover + .user_preview, .render_username .user_preview:hover {
+    display: inline-block !important;
+    position: absolute;
+    top: 17px;
+    left: 0;
+    background-color: white;
+    z-index: 20;
+  }
+  .render_username .user_preview .card {
+    width: 300px;
+  }
+  .render_username .user_preview .card .preview_avatar_image {
+    max-width: 50%;
+  }
+  .render_username .user_preview .card .preview_avatar_image img {
+    max-width: 100%;
+  }
 }
 
 /* high contrast */
diff --git a/app/static/styles.scss b/app/static/styles.scss
index a3487b1b..f2fa6014 100644
--- a/app/static/styles.scss
+++ b/app/static/styles.scss
@@ -1682,26 +1682,29 @@ form {
     display: inline-block;
   }
 
-  .author_link:hover + .user_preview, .user_preview:hover {
-    display: inline-block !important;
-    position: absolute;
-    top: 17px;
-    left: 0;
-    background-color: white;
-    z-index: 20;
-  }
+  @include breakpoint(laptop) {
+    .author_link:hover + .user_preview, .user_preview:hover {
+      display: inline-block !important;
+      position: absolute;
+      top: 17px;
+      left: 0;
+      background-color: white;
+      z-index: 20;
+    }
 
-  .user_preview .card {
-    width: 300px;
+    .user_preview .card {
+      width: 300px;
 
-    .preview_avatar_image {
-      max-width: 50%;
+      .preview_avatar_image {
+        max-width: 50%;
 
-      img {
-        max-width: 100%;
+        img {
+          max-width: 100%;
+        }
       }
     }
   }
+
 }
 
 /* high contrast */