diff --git a/doc/_static/contour_frontpage.png b/doc/_static/contour_frontpage.png
new file mode 100644
index 00000000000..61e567cd38c
Binary files /dev/null and b/doc/_static/contour_frontpage.png differ
diff --git a/doc/_static/histogram_frontpage.png b/doc/_static/histogram_frontpage.png
new file mode 100644
index 00000000000..3c2e5ad0b88
Binary files /dev/null and b/doc/_static/histogram_frontpage.png differ
diff --git a/doc/_static/membrane_frontpage.png b/doc/_static/membrane_frontpage.png
new file mode 100644
index 00000000000..ec1eba24312
Binary files /dev/null and b/doc/_static/membrane_frontpage.png differ
diff --git a/doc/_static/mpl.css b/doc/_static/mpl.css
index 66cd21fe64f..722a58bb17a 100644
--- a/doc/_static/mpl.css
+++ b/doc/_static/mpl.css
@@ -682,3 +682,58 @@ figcaption {
     background: #003c63;
     outline-color: #003c63;
 }
+
+
+div.responsive_screenshots {
+    /* Horizontally centered */
+    display: block;
+    margin: auto;
+
+    /* Do not go beyond 1:1 scale (and ensure a 1x4 tight layout) */
+    max-width: 648px;  /* at most 4 x 1:1 subfig width  */
+    max-height: 139px; /* at most 1 x 1:1 subfig height */
+}
+
+/* To avoid subfigure parts outside of the responsive_screenshots  */
+/* element (see: https://stackoverflow.com/questions/2062258/      */
+/* floating-stuff-within-a-div-floats-outside-of-div-why)          */
+span.clear_screenshots { clear: left; display: block; }
+
+div.responsive_subfig{
+    float: left;
+    width: 25%;  /* we want 4 subfigs in a row */
+
+    /* Include content, padding and border in width. This should */
+    /* avoid having to use tricks like "width: 24.9999%"         */
+    box-sizing: border-box; 
+}
+
+div.responsive_subfig img {
+    /* Horizontally centered */
+    display: block;
+    margin: auto;
+
+    /* Possible downscaling */
+    max-width: 162px;  /* at most 1 x 1:1 subfig width  */
+    max-height: 139px; /* at most 1 x 1:1 subfig height */
+
+    width: 100%;
+}
+
+@media only screen and (max-width: 1000px){
+    /* The value of 1000px was handcrafted to provide a more or less */
+    /* smooth transition between the 1x4 and the 2x2 layouts. It is  */
+    /* NB: it is slightly below 1024px: so one should still have a   */
+    /* row in a 1024x768 window                                      */
+
+    div.responsive_screenshots {
+        /* Do not go beyond 1:1 scale (and ensure a 2x2 tight layout) */
+        max-width: 324px;  /* at most 2 x 1:1 subfig width  */
+        max-height: 278px; /* at most 2 x 1:1 subfig height */
+    }
+
+    div.responsive_subfig {
+        width: 50%;  /* we want 2 subfigs in a row */
+    }
+
+}
diff --git a/doc/_static/surface3d_frontpage.png b/doc/_static/surface3d_frontpage.png
new file mode 100644
index 00000000000..613e391bc5b
Binary files /dev/null and b/doc/_static/surface3d_frontpage.png differ
diff --git a/doc/_templates/index.html b/doc/_templates/index.html
index 9b1989c068e..ff6abdd3bdf 100644
--- a/doc/_templates/index.html
+++ b/doc/_templates/index.html
@@ -57,9 +57,23 @@
   web application servers, and six graphical user
   interface toolkits.</p>
 
-  <p align="center"><a href="{{ pathto('users/screenshots') }}"><img align="middle"
-  src="{{ pathto('_static/logo_sidebar_horiz.png', 1) }}" border="0"
-  alt="screenshots"/></a></p>
+  <div class="responsive_screenshots">
+    <a a href="{{ pathto('users/screenshots') }}">
+      <div class="responsive_subfig">
+        <img align="middle", src="{{ pathto('_static/membrane_frontpage.png', 1) }}", border="0", alt="screenshots"/>
+      </div>
+      <div class="responsive_subfig">
+        <img align="middle", src="{{ pathto('_static/histogram_frontpage.png', 1) }}", border="0", alt="screenshots"/>
+      </div>
+      <div class="responsive_subfig">
+        <img align="middle", src="{{ pathto('_static/contour_frontpage.png', 1) }}", border="0", alt="screenshots"/>
+      </div>
+      <div class="responsive_subfig">
+        <img align="middle", src="{{ pathto('_static/surface3d_frontpage.png', 1) }}", border="0", alt="screenshots"/>
+      </div>
+    </a>
+  </div>
+  <span class="clear_screenshots"></span>
 
   <p>matplotlib tries to make easy things easy and hard things possible.
   You can generate plots, histograms, power spectra, bar charts,