diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index ca59f4c5697..9092b347e1f 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -1,3 +1,4 @@
+@charset "utf-8";
 /*       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
  *
  * css for editor buttons, openerp widget included in the website and other
@@ -334,10 +335,15 @@ ul.nav-stacked > li > a {
 }
 
 /* ---- SNIPPETS --- */
-[data-snippet-id],.colmd,.hr,.blockquote {
-    overflow: hidden;
+[data-snippet-id], .colmd, .hr, .blockquote {
+  overflow: hidden;
 }
 
+@media (max-width: 400px) {
+  [data-snippet-id] {
+    height: auto !important;
+  }
+}
 .carousel-inner {
   height: 100%;
 }
@@ -345,6 +351,7 @@ ul.nav-stacked > li > a {
   height: 100%;
   background-size: 100%;
 }
+
 .carousel .carousel-caption {
   left: auto;
   right: auto;
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index ab13d795465..ec7984505f8 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -245,6 +245,10 @@ ul.nav-stacked > li > a
 [data-snippet-id],.colmd,.hr,.blockquote
     overflow: hidden
 
+@media (max-width: 400px)
+    [data-snippet-id]
+        height: auto !important
+
 .carousel-inner
     height: 100%
     .item