Fix #2084

diff --git a/docs/documentation/overview/responsiveness.html b/docs/documentation/overview/responsiveness.html
index 35fd5aa6b18080a5d271e99d7be0c4316bf78a61..834a5f17a140890a4188137c82fad40688958555 100644 (file)
--- a/docs/documentation/overview/responsiveness.html
+++ b/docs/documentation/overview/responsiveness.html
@@ -87,124 +87,126 @@ $fullhd-enabled: false
   </ul>
 </div>
 
-<table class="table is-bordered">
-  <thead>
-    <tr>
-      {% for breakpoint_hash in site.data.breakpoints %}
-        {% assign breakpoint = breakpoint_hash[1] %}
-        <th style="width: 20%;">
-          {{ breakpoint.name }}<br>
-          {% if breakpoint.id == 'mobile' %}
-            Up to <code>{{ breakpoint.to }}px</code>
-          {% elsif breakpoint.id == 'fullhd' %}
-            <code>{{ breakpoint.from }}px</code> and above
-          {% else %}
-            Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
-          {% endif %}
-        </th>
-      {% endfor %}
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>
-        <p class="notification is-success">mobile</p>
-      </td>
-      <td colspan="4">
-        <p class="notification">-</p>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <p class="notification">-</p>
-      </td>
-      <td colspan="4">
-        <p class="notification is-success">tablet</p>
-      </td>
-    </tr>
-    <tr>
-      <td colspan="2">
-        <p class="notification">-</p>
-      </td>
-      <td colspan="3">
-        <p class="notification is-success">desktop</p>
-      </td>
-    </tr>
-    <tr>
-      <td colspan="3">
-        <p class="notification">-</p>
-      </td>
-      <td colspan="2">
-        <p class="notification is-success">widescreen</p>
-      </td>
-    </tr>
-    <tr>
-      <td colspan="4">
-        <p class="notification">-</p>
-      </td>
-      <td>
-        <p class="notification is-success">fullhd</p>
-      </td>
-    </tr>
-    <tr>
-      <td>
-        <p class="notification">-</p>
-      </td>
-      <td>
-        <p class="notification is-success">tablet-only</p>
-      </td>
-      <td colspan="3">
-        <p class="notification">-</p>
-      </td>
-    </tr>
-    <tr>
-      <td colspan="2">
-        <p class="notification">-</p>
-      </td>
-      <td>
-        <p class="notification is-success">desktop-only</p>
-      </td>
-      <td colspan="2">
-        <p class="notification">-</p>
-      </td>
-    </tr>
-    <tr>
-      <td colspan="3">
-        <p class="notification">-</p>
-      </td>
-      <td>
-        <p class="notification is-success">widescreen-only</p>
-      </td>
-      <td>
-        <p class="notification">-</p>
-      </td>
-    </tr>
-    <tr>
-      <td colspan="2">
-        <p class="notification is-success">touch</p>
-      </td>
-      <td colspan="3">
-        <p class="notification">-</p>
-      </td>
-    </tr>
-    <tr>
-      <td colspan="3">
-        <p class="notification is-success">until-widescreen</p>
-      </td>
-      <td colspan="2">
-        <p class="notification">-</p>
-      </td>
-    </tr>
-    <tr>
-      <td colspan="4">
-        <p class="notification is-success">until-fullhd</p>
-      </td>
-      <td colspan="1">
-        <p class="notification">-</p>
-      </td>
-    </tr>
-  </tbody>
-</table>
+<div class="table-container">
+  <table class="table is-bordered">
+    <thead>
+      <tr>
+        {% for breakpoint_hash in site.data.breakpoints %}
+          {% assign breakpoint = breakpoint_hash[1] %}
+          <th style="width: 20%;">
+            {{ breakpoint.name }}<br>
+            {% if breakpoint.id == 'mobile' %}
+              Up to <code>{{ breakpoint.to }}px</code>
+            {% elsif breakpoint.id == 'fullhd' %}
+              <code>{{ breakpoint.from }}px</code> and above
+            {% else %}
+              Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
+            {% endif %}
+          </th>
+        {% endfor %}
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>
+          <p class="notification is-success">mobile</p>
+        </td>
+        <td colspan="4">
+          <p class="notification">-</p>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <p class="notification">-</p>
+        </td>
+        <td colspan="4">
+          <p class="notification is-success">tablet</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <p class="notification">-</p>
+        </td>
+        <td colspan="3">
+          <p class="notification is-success">desktop</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="3">
+          <p class="notification">-</p>
+        </td>
+        <td colspan="2">
+          <p class="notification is-success">widescreen</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="4">
+          <p class="notification">-</p>
+        </td>
+        <td>
+          <p class="notification is-success">fullhd</p>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          <p class="notification">-</p>
+        </td>
+        <td>
+          <p class="notification is-success">tablet-only</p>
+        </td>
+        <td colspan="3">
+          <p class="notification">-</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <p class="notification">-</p>
+        </td>
+        <td>
+          <p class="notification is-success">desktop-only</p>
+        </td>
+        <td colspan="2">
+          <p class="notification">-</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="3">
+          <p class="notification">-</p>
+        </td>
+        <td>
+          <p class="notification is-success">widescreen-only</p>
+        </td>
+        <td>
+          <p class="notification">-</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <p class="notification is-success">touch</p>
+        </td>
+        <td colspan="3">
+          <p class="notification">-</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="3">
+          <p class="notification is-success">until-widescreen</p>
+        </td>
+        <td colspan="2">
+          <p class="notification">-</p>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="4">
+          <p class="notification is-success">until-fullhd</p>
+        </td>
+        <td colspan="1">
+          <p class="notification">-</p>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 
 {% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}