2 files changed, 98 insertions, 12 deletions

diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss
index d48000e16..61641c989 100644
--- a/src/client/views/nodes/PresBox.scss
+++ b/src/client/views/nodes/PresBox.scss
@@ -16,6 +16,7 @@
         height: calc(100% - 25px);
         width: 100%;
     }
+
     .presBox-buttons {
         width: 100%;
         background: gray;
@@ -24,6 +25,7 @@
         display: grid;
         grid-column-end: 4;
         grid-column-start: 1;
+
         .presBox-viewPicker {
             height: 25;
             position: relative;
@@ -31,10 +33,12 @@
             grid-column: 1/2;
             min-width: 15px;
         }
+
         select {
             background: #323232;
             color: white;
         }
+
         .presBox-button {
             margin-right: 2.5%;
             margin-left: 2.5%;
@@ -44,10 +48,12 @@
             align-items: center;
             background: #323232;
             color: white;
+
             svg {
                 margin: auto;
             }
         }
+
         .collectionViewBaseChrome-viewPicker {
             min-width: 50;
             width: 5%;
@@ -56,17 +62,65 @@
             display: inline-block;
         }
     }
-    .presBox-backward, .presBox-forward {
+
+    .presBox-backward,
+    .presBox-forward {
         width: 25px;
         border-radius: 5px;
-        top:50%;
+        top: 50%;
         position: absolute;
         display: inline-block;
     }
+
     .presBox-backward {
-        left:5;
+        left: 5;
     }
+
     .presBox-forward {
-        right:5;
+        right: 5;
+    }
+}
+
+@media only screen and (max-width: 1000px) {    .presBox-cont .presBox-buttons {
+        position: absolute;
+        top: 85%;
+        left: 50%;
+        transform: translate(-50%, 0);
+        width: max-content;
+        height: 15%;
+        z-index: 2;
+        align-items: center;
+        background: rgba(0, 0, 0, 0);
+        padding-top: 5px;
+        padding-bottom: 5px;
+        display: inline-flex;
+    }
+
+    .presBox-cont .presBox-listCont {
+        position: absolute;
+        top: 50;
+        height: calc(100% - 80px);
+        width: 100%;
+    }
+
+    .presBox-cont .presBox-buttons .presBox-button {
+        margin-right: 10px;
+        margin-left: 10px;
+        height: 130px;
+        width: 130px;
+        font-size: 50;
+        border-radius: 5px;
+        display: flex;
+        align-items: center;
+        background: #323232;
+        color: white;
+    }
+
+    .presBox-cont .presBox-buttons .presBox-viewPicker {
+        height: 50;
+        width: 100;
+        font-size: 30px;
+        position: relative;
+        min-width: 50px;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss
index ccd2e8947..1ddf3d8bc 100644
--- a/src/client/views/presentationview/PresElementBox.scss
+++ b/src/client/views/presentationview/PresElementBox.scss
@@ -13,9 +13,10 @@
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    transition: all .1s; 
+    transition: all .1s;
     padding: 0px;
     padding-bottom: 3px;
+
     .documentView-node {
         position: absolute;
         z-index: 1;
@@ -45,7 +46,7 @@
 
 .presElementBox-closeIcon {
     border-radius: 20px;
-    transform:scale(0.7);
+    transform: scale(0.7);
     position: absolute;
     right: 0;
     top: 0;
@@ -58,6 +59,7 @@
     position: relative;
     width: 100%;
     height: auto;
+
     .presElementBox-interaction {
         color: gray;
         float: left;
@@ -65,6 +67,7 @@
         width: 20px;
         height: 20px;
     }
+
     .presElementBox-interaction-selected {
         color: white;
         float: left;
@@ -90,15 +93,44 @@
     display: flex;
     width: auto;
     justify-content: center;
-    margin:auto;
+    margin: auto;
 }
 
 .presElementBox-embeddedMask {
-    width:100%;
-    height:100%;
+    width: 100%;
+    height: 100%;
     position: absolute;
-    left:0;
-    top:0;
+    left: 0;
+    top: 0;
     background: transparent;
-    z-index:2;
+    z-index: 2;
+}
+
+@media only screen and (max-width: 1000px) {
+    .presElementBox-buttons {
+        display: inline-flex;
+        position: relative;
+        width: 100%;
+    }
+
+    .presElementBox-item {
+        display: inline-flex;
+    }
+
+    .presElementBox-buttons .presElementBox-interaction {
+        color: gray;
+        float: left;
+        padding: 0px;
+        width: 50;
+        height: 40;
+    }
+
+    .presElementBox-buttons .presElementBox-interaction-selected {
+        color: white;
+        float: left;
+        padding: 0px;
+        width: 50;
+        height: 50;
+        border: solid 1px darkgray;
+    }
 }
\ No newline at end of file