View Single Post
Old 05-24-2017, 04:05 PM  
Teen Boys Milk
So Fucking Banned
 
Industry Role:
Join Date: Feb 2015
Posts: 98
You seem to be the one who can help me

Quote:
Originally Posted by danevans View Post
in dcae4.css remove
.col_wrap_fourth .col_item:nth-child(4n+1) {
clear: both;
}
and it will be somewhat better, columns will flow depending on height, not be placed in rows.

what you want is this, try playing:
https://isotope.metafizzy.co/layout-modes/masonry.html
I see your suggested code already in the css but obviously it is not configured right.

Please please PLEASE look at this code and tell me what to do

Code:
/* Categorizator */
.col_item{ position: relative;}
.col_wrap_two{margin: 0 -2.5% 20px; overflow: hidden;}
.col_wrap_two .col_item {width: 45%; margin: 0 2.5% 30px; float: left;}
.col_wrap_three{margin: 0 -1.5% 20px; overflow: hidden;}
.col_wrap_three .col_item {width: 30.33%; margin: 0 1.5% 25px; float: left;}
.col_wrap_three .col_item:nth-child(3n+1) { clear: both;}
.col_wrap_two .col_item:nth-child(2n+1) { clear: both;}
.col_wrap_fourth{margin: 0 -1% 15px; overflow: hidden;}
.col_wrap_fifth, .col_wrap_six{margin: 0 -1% 15px; overflow: hidden;}
.col_wrap_fourth .col_item {width: 23%; margin: 0 1% 25px; float: left;}
.col_wrap_fourth .col_item:nth-child(4n+1) { clear: both;}
.col_wrap_fifth .col_item {width: 18%; margin: 0 1% 25px; float: left;}
.col_wrap_fifth .col_item:nth-child(5n+1) { clear: both;}
.col_wrap_six .col_item {width: 15.26%; margin: 0 0.7% 25px; float: left;}
.col_wrap_six .col_item:nth-child(6n+1) { clear: both;}
.rh-flex-columns{display: -webkit-flex; -webkit-flex-wrap:wrap;-webkit-justify-content: space-between;display: -ms-flexbox; -ms-flex-wrap:wrap;-ms-justify-content: space-between;-ms-flex-pack: justify;display: flex; flex-wrap: wrap;justify-content: space-between; flex-direction: row; }
.rh-flex-eq-height{display: -webkit-flex; -webkit-flex-wrap:wrap;display: -ms-flexbox; -ms-flex-wrap:wrap;display: flex; flex-wrap: wrap;flex-direction: row; }
.rh-flex-eq-height .pagination, .rh-flex-eq-height .re_ajax_pagination, .rh-flex-eq-height .woocommerce-pagination{width: 100%;flex-basis: 100%;}
.rh-flex-eq-height .re_ajax_pagination{margin: -1px; }
.no_padding_wrap .col_wrap_three .col_item, .no_padding_wrap .col_wrap_fourth .col_item, .no_padding_wrap .col_wrap_fifth .col_item, .no_padding_wrap .col_wrap_six .col_item{margin: 0; box-shadow: none !important}
.no_padding_wrap .col_wrap_three .col_item{width: 33.33%}
.no_padding_wrap .col_wrap_fourth .col_item{width: 25%}
.no_padding_wrap .col_wrap_fifth .col_item{width: 20%}
.no_padding_wrap .col_wrap_six .col_item{width: 16.66%}
@media (max-width: 1024px) and (min-width: 768px) {
.col_wrap_fourth, .col_wrap_fifth, .col_wrap_six{margin: 0 -1.5% 20px; overflow: hidden;}
.col_wrap_fourth .col_item, .col_wrap_fifth .col_item, .col_wrap_six .col_item {width: 30.33%; margin: 0 1.5% 15px; float: left;}
.no_padding_wrap .col_wrap_fourth .col_item, .no_padding_wrap .col_wrap_fifth .col_item, .no_padding_wrap .col_wrap_six .col_item{width: 33%; margin: 0}
.col_wrap_fourth .col_item:nth-child(3n+1), .col_wrap_fifth .col_item:nth-child(3n+1), .col_wrap_six .col_item:nth-child(3n+1){ clear: both;}
.col_wrap_fourth .col_item:nth-child(4n+1), .col_wrap_fifth .col_item:nth-child(5n+1), .col_wrap_six .col_item:nth-child(6n+1) { clear: none;}
}
@media (max-width: 767px) {
.col_wrap_two, .col_wrap_three, .col_wrap_fourth, .col_wrap_fifth, .col_wrap_six{margin: 0 0 20px 0;}
.col_wrap_three .col_item, .col_wrap_fourth .col_item, .col_wrap_fifth .col_item, .col_wrap_six .col_item {width: 45%; margin: 0 2.5% 15px 2.5%;}
.no_padding_wrap .col_wrap_three .col_item, .no_padding_wrap .col_wrap_fourth .col_item, .no_padding_wrap .col_wrap_fifth .col_item, .no_padding_wrap .col_wrap_six .col_item{width: 50%; margin: 0}
.col_wrap_three .col_item:nth-child(3n+1), .col_wrap_fifth .col_item:nth-child(5n+1) { clear: none;}
.col_wrap_three .col_item:nth-child(2n+1), .col_wrap_fourth .col_item:nth-child(2n+1), .col_wrap_fifth .col_item:nth-child(2n+1), .col_wrap_six .col_item:nth-child(2n+1) { clear: both;}
}
@media (max-width: 480px) {
.col_wrap_three, .col_wrap_fourth, .col_wrap_two, .col_wrap_fifth, .col_wrap_six, .col_wrap_two {margin: 0 0 25px;}
.col_item{width: 100% !important;}

}
.post_eq_grid{padding-top: 5px}
.no_padding_wrap .eq_grid .col_item{border: 1px solid #eee; border-top: none; border-left: none}
.no_padding_wrap .eq_grid{border: 1px solid #eee; border-right: none; border-bottom: none; padding: 0}
.fourth-col-gridhub .multi_cat {width: 23%; margin: 0 1% 20px;}
.multi_cat { background-color: #fff; border: 1px solid #E7E7E7; box-shadow: 0 4px 4px -2px rgba(0,0,0,0.1);   float: left; position: relative; }
.multi_cat_wrap { position: relative; }
.multi_cat_header { position: relative; background: #F5F5F5; width: 100%; border-bottom: 1px solid #E2E2E2; }
.multi_cat_lable { display: inline-block; font-weight: 700; font-size: 13px; line-height: 14px; text-transform: uppercase; color: #333; position: relative; padding: 15px; letter-spacing: 0.5px }
.multi_cat_lable span { margin-left: 0; margin-right: 7px; position: relative; top: 2px; }
.category-icon { background-size: 16px 16px !important; background-color: #ccc; width: 16px; height: 16px; float: left; }
.multi_cat_title { font-size: 13px; font-weight: bold; line-height: 16px }
.multi_cat_title a { color: #111 !important; text-decoration: none !important; }
.multi_cat .comm_meta { text-decoration: none !important;}
.multi_cat_artical { padding: 10px; min-height: 61px; border-bottom: 1px solid #E7E7E7; overflow: hidden; }
.multi_cat_wrap .multi_cat_artical:last-child { border: none; }
.multi_cat_artical:hover { background-color: #F6F6F6; }
.multi_cat_image { float: left; margin: 0 10px 0 0; }
.cat-pagination { text-align: center; border-radius: 0px; margin: 0px; border-top: 1px solid #E2E2E2; overflow: hidden; padding: 0 5px;   }
.cat-pagination a { display: block; float: left; cursor: pointer; font-size: 14px; font-weight: 500; text-align: center; min-width: 20px; line-height: 1em; padding: 9px 0px; color: #BABDD3 !important; text-decoration: none !important; }
.cat-pagination a.active { color: #000000 !important; }
.multi_cat_meta { margin-top: 5px; display: block; }
.multi_cat .loading { opacity: .5; }
.multi_cat .loading:after { content: "\f110"; position: absolute; top: 30px; left: 45%; font-size: 24px; opacity: 1; font-family: FontAwesome; -webkit-animation: fa-spin 1s linear infinite; -moz-animation: fa-spin 1s linear infinite; -o-animation: fa-spin 1s linear infinite; animation: fa-spin 1s linear infinite; }
.categoriesbox { overflow: hidden;margin: 0 auto 15px auto !important; border: 1px solid #e0e0e0; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; -ms-transition: .2s; -o-transition: .2s; max-width: 300px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.02), 0 2px 10px 0 rgba(0, 0, 0, 0.12);  background-color: #fff}
.categoriesbox:hover { box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.02), 0 5px 10px 0 rgba(0, 0, 0, 0.15); }
.categoriesbox .categoriesbox-content { padding: 20px 20px;  }
.categoriesbox h3 { margin: 0 0 12px 0; padding: 0; position: relative; }
.categoriesbox:hover { transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; -ms-transition: .2s; -o-transition: .2s }
.categoriesbox h3 a { text-decoration: none; }
.categoriesbox h3 a:after { content: "\f105"; font-family: FontAwesome; font-size: 20px; float: right; display: inline-block; padding-left: 8px; color: #555; line-height: 21px; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; -ms-transition: .2s; -o-transition: .2s }
.categoriesbox:hover h3 a:after {padding-right: 5px }
.categoriesbox .categoriesbox-content p { margin-bottom: 0; }
.categoriesbox-bg { height: 175px; background-size: cover; -webkit-background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; -ms-transition: .2s; -o-transition: .2s }
.categoriesbox-bg a:before { content: "\f08e"; font-family: FontAwesome; font-size: 50px; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; color: #fff; opacity: 0; transition: .2s; -webkit-transition: .2s; -moz-transition: .2s; -ms-transition: .2s; -o-transition: .2s }
.categoriesbox-bg a { width: 100%; height: 100%; display: block; position: relative; }
.categoriesbox:hover .categoriesbox-bg a:before { opacity: 0.7 }
.categoriesbox:hover .categoriesbox-bg { opacity: 0.8 }
Teen Boys Milk is offline   Share thread on Digg Share thread on Twitter Share thread on Reddit Share thread on Facebook Reply With Quote