diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl
index 01e345191..9eb64da4e 100644
--- a/client/components/cards/cardDetails.styl
+++ b/client/components/cards/cardDetails.styl
@@ -243,41 +243,42 @@ avatar-radius = 50%
   .activities
     padding-top: 10px
 
-.card-details-maximized
-  padding: 0
-  flex-shrink: 0
-  flex-basis: calc(100% - 20px)
-  will-change: flex-basis
-  overflow-y: scroll
-  overflow-x: scroll
-  background: darken(white, 3%)
-  border-radius: bottom 3px
-  z-index: 1000 !important
-  animation: flexGrowIn 0.1s
-  box-shadow: 0 0 7px 0 darken(white, 30%)
-  transition: flex-basis 0.1s
-  box-sizing: border-box
-  position: absolute
-  top: 0
-  left: 0
-  height: calc(100% - 20px)
-  width: calc(100% - 20px)
-  float: left
-
-  .card-details-left
-    float: left
-    top: 60px
-    left: 20px
-    width: 47%
-
-  .card-details-right
+@media screen and (min-width: 801px)
+  .card-details-maximized
+    padding: 0
+    flex-shrink: 0
+    flex-basis: calc(100% - 20px)
+    will-change: flex-basis
+    overflow-y: scroll
+    overflow-x: scroll
+    background: darken(white, 3%)
+    border-radius: bottom 3px
+    z-index: 1000 !important
+    animation: flexGrowIn 0.1s
+    box-shadow: 0 0 7px 0 darken(white, 30%)
+    transition: flex-basis 0.1s
+    box-sizing: border-box
     position: absolute
-    float: right
-    top: 20px
-    left: 50%
+    top: 0
+    left: 0
+    height: calc(100% - 20px)
+    width: calc(100% - 20px)
+    float: left
 
-  .card-details-header
-    width: 47%
+    .card-details-left
+      float: left
+      top: 60px
+      left: 20px
+      width: 47%
+
+    .card-details-right
+      position: absolute
+      float: right
+      top: 20px
+      left: 50%
+
+    .card-details-header
+      width: 47%
 
 input[type="text"].attachment-add-link-input
   float: left