diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
index 9b5d925..1d76341 100644
--- a/src/app/components/home/home.component.html
+++ b/src/app/components/home/home.component.html
@@ -3,7 +3,7 @@
 <header>
 
   <!-- Intro Section -->
-  <div class="view hm-white-light jarallax" id="intro" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2844%29.jpg); background-attachment: fixed;">
+  <div class="col-md-12 col-sm-12 mb-3 view hm-white-light jarallax" id="intro" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2844%29.jpg); background-attachment: fixed;">
     <div class="full-bg-img">
       <div class="container flex-center">
         <div class="row pt-5 mt-3">
@@ -32,7 +32,7 @@
 
 
 <!--Section: Features v.1-->
-<section class="section col-md-12 col-sm-12 feature-box wow fadeInUp" id="features">
+<section class="section col-md-12 col-sm-12 mb-3 feature-box wow fadeInUp" id="features">
 
   <!--Section heading-->
   <h1 class="section-heading pt-4">Comment ça marche ?</h1>
@@ -81,7 +81,7 @@
 
 
 <!--Projects section v.3-->
-<section class="section col-md-12 col-sm-12 extra-margins" id="projects">
+<section class="section col-md-12 col-sm-12 mb-3 extra-margins" id="projects">
 
 
   <!--Grid row-->
diff --git a/src/app/components/home/home.component.scss b/src/app/components/home/home.component.scss
index d305d09..5794ab0 100644
--- a/src/app/components/home/home.component.scss
+++ b/src/app/components/home/home.component.scss
@@ -101,5 +101,13 @@ body {
   padding-top: 2%;
 }
 
+@media only screen
+and (min-device-width : 320px)
+and (max-device-width : 568px) {
+  .feature-box {
+    padding-top: 20vh;
+  }
+}
+