]> git.ipfire.org Git - thirdparty/bulma.git/commitdiff
Match multiple-breakpoint-example to the code
authorDaryl Fritz <darylfritz@gmail.com>
Thu, 27 Sep 2018 18:25:10 +0000 (14:25 -0400)
committerJeremy Thomas <bbxdesign@gmail.com>
Tue, 2 Oct 2018 05:22:36 +0000 (06:22 +0100)
The example code that a user copies doesn't match the code that runs in the browser. This is confusing for new users and fails to demonstrate the actual library.

docs/documentation/columns/responsiveness.html

index b04f1e2243e10769b82d2082e81122ce5b68af41..bff2dd803a2d64f97b60dfb68364d0e181edc6c0 100644 (file)
@@ -33,12 +33,14 @@ breadcrumb:
   <div class="column is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
     <code>is-three-quarters-mobile</code><br>
     <code>is-two-thirds-tablet</code><br>
-    <code>is-half-desktop</code>
-    <code>is-one-third-widescreen</code>
+    <code>is-half-desktop</code><br>
+    <code>is-one-third-widescreen</code><br>
     <code>is-one-quarter-fullhd</code>
   </div>
-  <div class="column">1</div>
-  <div class="column">1</div>
+  <div class="column">2</div>
+  <div class="column">3</div>
+  <div class="column">4</div>
+  <div class="column">5</div>
 </div>
 {% endcapture %}
 
@@ -108,24 +110,26 @@ breadcrumb:
 </div>
 
 <div class="columns is-mobile">
-  <div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop">
+  <div class="column is-three-quarters-mobile is-two-thirds-tablet is-half-desktop is-one-third-widescreen is-one-quarter-fullhd">
     <p class="bd-notification is-primary">
-      <code>is-half-mobile</code><br>
-      <code>is-one-third-tablet</code><br>
-      <code>is-one-quarter-desktop</code>
+      <code>is-three-quarters-mobile</code><br>
+      <code>is-two-thirds-tablet</code><br>
+      <code>is-half-desktop</code><br>
+      <code>is-one-third-widescreen</code><br>
+      <code>is-one-quarter-fullhd</code><br>
     </p>
   </div>
   <div class="column">
-    <p class="bd-notification is-primary">1</p>
+    <p class="bd-notification is-primary">2</p>
   </div>
   <div class="column">
-    <p class="bd-notification is-primary">1</p>
+    <p class="bd-notification is-primary">3</p>
   </div>
   <div class="column">
-    <p class="bd-notification is-primary">1</p>
+    <p class="bd-notification is-primary">4</p>
   </div>
   <div class="column">
-    <p class="bd-notification is-primary">1</p>
+    <p class="bd-notification is-primary">5</p>
   </div>
 </div>