added a hack so rows don't get jumbled up
authorAndrew Engelbrecht <andrew@fsf.org>
Wed, 31 Jul 2019 19:58:18 +0000 (15:58 -0400)
committerAndrew Engelbrecht <andrew@fsf.org>
Wed, 31 Jul 2019 19:58:18 +0000 (15:58 -0400)
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.

css/bootstrap-auto-clear.css [new file with mode: 0644]
ryf.libraries.yml

diff --git a/css/bootstrap-auto-clear.css b/css/bootstrap-auto-clear.css
new file mode 100644 (file)
index 0000000..d8f4f4e
--- /dev/null
@@ -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;}
+}
index 54767e9..ea19261 100644 (file)
@@ -4,6 +4,7 @@ framework:
      css/bootstrap.css: {}
      css/drupal-bootstrap.css: {}
      css/style.css: {}
+     css/bootstrap-auto-clear.css: {}
 
   js:
     js/hacks.js: {}