/** * This is file is only for masonry post * * @package Articled * @subpackage Admin * @since Articled 1.0 * */ .posts-masonry { column-count: 3; column-gap: 14px; padding: 0 15px } .posts-masonry article { background-color: rgba(255, 255, 255, .25); display: inline-block; margin: 0 0 1em; width: 100% } .post-thumbnail { width: 100%; height: auto; margin: 0; padding: 0; margin-bottom: 10px } .blog-type-masonry .wp-playlist { padding: 0!important } .post-thumbnail .video-frame { background-color: black } .post-thumbnail img, .post-thumbnail iframe, .wp-playlist video { display: block; width: 100%; margin: auto; height: 180px !important } .post-thumbnail .wp-playlist-current-item { width: 100% } .post-thumbnail .mejs-controls { padding: 0 } .post-thumbnail .wp-playlist img { width: 60px!important; height: 60px!important; border-radius: 5px!important; min-height: inherit; object-fit: scale-down } .prev-slider, .next-slider { cursor: pointer; position: absolute; top: 50%; transform: translateY(-80%); padding: 14px; color: white!important; font-weight: 700; font-size: 18px; background: rgba(0, 0, 0, .3); margin: 0 0 } .post-info { width: 100%; height: auto; display: block; padding: 8px 0 } .blog-post-title { font-size: 19px; margin-top: 0; margin-bottom: 2px; letter-spacing: .8px; line-height: inherit } .blog-post-meta { margin-top: 10px } .blog-post-meta span, .blog-post-meta .type { padding-right: 4px } .blog-post-meta { line-height: 1.5 } .index-excerpt { border-bottom: 1px dotted #ddd; padding-bottom: 0; margin-bottom: 30px } .blog-post-meta .comments, .blog-post-meta .author, .blog-post-meta .category { display: inline-block } .blog-post-meta .author img{ } @media (min-width:1281px) { .posts-masonry { column-count: 4 } } @media only screen and (min-width:1024px) { .posts-masonry { column-count: 3 } } @media only screen and (max-width:1023px) and (min-width:768px) { .posts-masonry { column-count: 3 } } @media only screen and (max-width:767px) and (min-width:540px) { .posts-masonry { column-count: 2 } } @media only screen and (max-width:540px) { .posts-masonry { column-count: 1 } .post-thumbnail img, .post-thumbnail iframe, .wp-playlist video { display: block; width: 100%; margin: auto; height: 200px!important } }