added a hack so rows don't get jumbled up

when there are tall and short divs mixed up in a row, sometimes the next
div in the following row starts off behind the end of a taller div from
the previous row. this code should resolve that issue.

diff --git a/css/bootstrap-auto-clear.css b/css/bootstrap-auto-clear.css
new file mode 100644 (file)
index 0000000..d8f4f4e
--- /dev/null
+++ b/css/bootstrap-auto-clear.css
@@ -0,0 +1,29 @@
+/* https://stackoverflow.com/questions/26939104/clear-rows-when-doing-multi-responsive-columns-bootstrap/33540628#33540628 */
+@media (min-width:1200px){
+    .auto-clear .col-lg-1:nth-child(12n+1){clear:left;}
+    .auto-clear .col-lg-2:nth-child(6n+1){clear:left;}
+    .auto-clear .col-lg-3:nth-child(4n+1){clear:left;}
+    .auto-clear .col-lg-4:nth-child(3n+1){clear:left;}
+    .auto-clear .col-lg-6:nth-child(odd){clear:left;}
+}
+@media (min-width:992px) and (max-width:1199px){
+    .auto-clear .col-md-1:nth-child(12n+1){clear:left;}
+    .auto-clear .col-md-2:nth-child(6n+1){clear:left;}
+    .auto-clear .col-md-3:nth-child(4n+1){clear:left;}
+    .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
+    .auto-clear .col-md-6:nth-child(odd){clear:left;}
+}
+@media (min-width:768px) and (max-width:991px){
+    .auto-clear .col-sm-1:nth-child(12n+1){clear:left;}
+    .auto-clear .col-sm-2:nth-child(6n+1){clear:left;}
+    .auto-clear .col-sm-3:nth-child(4n+1){clear:left;}
+    .auto-clear .col-sm-4:nth-child(3n+1){clear:left;}
+    .auto-clear .col-sm-6:nth-child(odd){clear:left;}
+}
+@media (max-width:767px){
+    .auto-clear .col-xs-1:nth-child(12n+1){clear:left;}
+    .auto-clear .col-xs-2:nth-child(6n+1){clear:left;}
+    .auto-clear .col-xs-3:nth-child(4n+1){clear:left;}
+    .auto-clear .col-xs-4:nth-child(3n+1){clear:left;}
+    .auto-clear .col-xs-6:nth-child(odd){clear:left;}
+}

diff --git a/ryf.libraries.yml b/ryf.libraries.yml
index 54767e9ac13a46c172ff44f22d3efa7da6a7402a..ea192617db9fb796149115966f56c2c18a80a6c6 100644 (file)
--- a/ryf.libraries.yml
+++ b/ryf.libraries.yml
@@ -4,6 +4,7 @@ framework:
      css/bootstrap.css: {}
      css/drupal-bootstrap.css: {}
      css/style.css: {}
      css/bootstrap.css: {}
      css/drupal-bootstrap.css: {}
      css/style.css: {}

+     css/bootstrap-auto-clear.css: {}

 
   js:
     js/hacks.js: {}
 
   js:
     js/hacks.js: {}