diff --git a/front/src/App.vue b/front/src/App.vue
index fb1c27a899fb8b39d65118969688ca1805a91f13..d310c3ca9d2ab2183337b35ea9321509dec0081c 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -40,6 +40,7 @@ export default {
 // and we end up with CSS rules not applied,
 // see https://github.com/webpack/webpack/issues/215
 @import 'semantic/semantic.css';
+@import 'style/vendor/media';
 
 
 #app {
@@ -56,11 +57,11 @@ export default {
 .main-pusher {
   padding: 1.5rem 0;
 }
-#footer {
-  padding: 4em;
-}
-.ui.stripe.segment {
-  padding: 4em;
+.ui.stripe.segment, #footer {
+  padding: 2em;
+  @include media(">tablet") {
+    padding: 4em;
+  }
 }
 
 .ui.small.text.container {
diff --git a/front/src/components/library/Library.vue b/front/src/components/library/Library.vue
index c27313dc36d2a9d08c0cbba2c0e704c7527c5063..5fe192022c8e34416259118f262fb87076e98458 100644
--- a/front/src/components/library/Library.vue
+++ b/front/src/components/library/Library.vue
@@ -22,8 +22,12 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss">
+@import '../../style/vendor/media';
+
 .library.pusher > .ui.secondary.menu {
-  margin: 0 2.5rem;
+  @include media(">tablet") {
+    margin: 0 2.5rem;
+  }
   .item {
     padding-top: 1.5em;
     padding-bottom: 1.5em;
@@ -37,7 +41,10 @@ export default {
     padding: 0;
     .segment-content {
       margin: 0 auto;
-      padding: 4em;
+      padding: 2em;
+      @include media(">tablet") {
+        padding: 4em;
+      }
     }
     &.with-background {
       .header {