diff --git a/client/src/components/AddObjectiveGroupButton.vue b/client/src/components/AddObjectiveGroupButton.vue
index 4a7afd52..6961e06d 100644
--- a/client/src/components/AddObjectiveGroupButton.vue
+++ b/client/src/components/AddObjectiveGroupButton.vue
@@ -37,15 +37,20 @@
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
   .add-objective-group-button {
-    display: grid;
+    display: none;
     grid-template-columns: 45px auto;
     align-items: center;
     margin-top: -20px;
     margin-bottom: 35px;
     cursor: pointer;
 
+    @include desktop {
+      display: grid;
+    }
+
     &__icon {
       width: 25px;
       height: 25px;
diff --git a/client/src/components/AddWidget.vue b/client/src/components/AddWidget.vue
index e8338fc2..6eee2b4c 100644
--- a/client/src/components/AddWidget.vue
+++ b/client/src/components/AddWidget.vue
@@ -1,5 +1,6 @@
 <template>
-  <component :is="component" v-bind="properties" class="add-widget" @click="$emit('click')" :class="{ 'add-widget--reverse': reverse }">
+  <component :is="component" v-bind="properties" class="add-widget" @click="$emit('click')"
+             :class="{ 'add-widget--reverse': reverse }">
     <add-icon class="add-widget__add"></add-icon>
   </component>
 </template>
@@ -47,12 +48,16 @@
   @import "@/styles/_mixins.scss";
 
   .add-widget {
-    display: flex;
+    display: none;
     align-items: center;
     justify-content: center;
     @include widget-shadow;
     cursor: pointer;
 
+    @include desktop {
+      display: flex;
+    }
+
     &__add {
       width: 80px;
       fill: $color-grey;
diff --git a/client/src/components/HeaderBar.vue b/client/src/components/HeaderBar.vue
index 4120f2cf..e8997ae0 100644
--- a/client/src/components/HeaderBar.vue
+++ b/client/src/components/HeaderBar.vue
@@ -54,8 +54,12 @@
   .header-bar {
     display: -ms-grid;
     @supports (display: grid) {
+      display: none;
+
+      @include desktop {
       display: grid;
     }
+    }
     align-items: center;
     justify-content: space-around;
     background-color: $color-white;
diff --git a/client/src/components/WidgetFooter.vue b/client/src/components/WidgetFooter.vue
index 9ec6e1a5..9e1f1099 100644
--- a/client/src/components/WidgetFooter.vue
+++ b/client/src/components/WidgetFooter.vue
@@ -34,6 +34,7 @@
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
   .widget-footer {
     background-color: $color-grey--lighter;
@@ -43,6 +44,11 @@
     position: relative;
     border-bottom-left-radius: $default-border-radius;
     border-bottom-right-radius: $default-border-radius;
+    visibility: hidden;
+
+    @include desktop {
+      visibility: visible;
+    }
 
     /*
      * For IE10+