/* * Themezee Related Posts CSS * https://themezee.com/plugins/related-posts/ * * Copyright(C) 2015, ThemeZee.com - support@themezee.com * License: GPL v3 * License URI: http://www.gnu.org/licenses/gpl-3.0.html * * @package Chronus */ /*-------------------------------------------------------------- # List Layout ---------------------------------------------------------------- */ ul.related-posts-list { margin: 1em 0 0; padding: 0; list-style: none; } .related-posts-list li { margin: 0 0 2em; padding: 0; list-style: none; } .related-posts-list li .entry-header { margin-top: 0.25em; } .related-posts-list li .entry-title { font-size: 20px; font-size: 1.25rem; } .related-posts-list li .wp-post-image { float: left; margin: 0 1em 0 0; padding: 0; max-width: 20%; height: auto; border: none; } /*-------------------------------------------------------------- # Grid Layouts ---------------------------------------------------------------- */ .related-posts-grid { margin: 1em 0 0; } .related-posts-columns { margin-right: -1em; } .related-posts-columns .related-post-column { float: left; box-sizing: border-box; margin-bottom: 2em; padding-right: 2em; } .related-posts-two-columns .related-post-column { width: 50%; } .related-posts-three-columns .related-post-column { width: 33.3333333333333%; } .related-posts-four-columns .related-post-column { width: 25%; } .related-posts-two-columns .related-post-column:nth-child(2n + 1) { clear: left; } .related-posts-three-columns .related-post-column:nth-child(3n + 1) { clear: left; } .related-posts-four-columns .related-post-column:nth-child(4n + 1) { clear: left; } .related-posts-two-columns .related-post-column .entry-title { font-size: 24px; font-size: 1.5rem; } .related-posts-three-columns .related-post-column .entry-title { font-size: 16px; font-size: 1rem; } .related-posts-four-columns .related-post-column .entry-title { font-size: 15px; font-size: 0.9375rem; } .related-posts-three-columns .related-post-column .entry-meta, .related-posts-four-columns .related-post-column .entry-meta { font-size: 12px; font-size: 0.75rem; } .related-posts-four-columns .related-post-column .entry-meta .meta-date, .related-posts-four-columns .related-post-column .entry-meta .meta-author { display: block; } .related-posts-four-columns .related-post-column .entry-meta .meta-date:after { display: none; } .related-posts-columns .related-post-column .wp-post-image { margin: 0 0 0.5em 0; padding: 0; border: none; } /*-------------------------------------------------------------- # Media Queries ---------------------------------------------------------------- */ @media only screen and (max-width: 80em) { /* Columns */ .related-posts-two-columns .related-post-column .entry-title { font-size: 22px; font-size: 1.375rem; } } @media only screen and (max-width: 70em) { /* Columns */ .related-posts-two-columns .related-post-column .entry-title { font-size: 20px; font-size: 1.25rem; } } @media only screen and (max-width: 50em) { /* Columns */ .related-posts-four-columns .related-post-column { width: 50%; } .related-posts-four-columns .related-post-column:nth-child(2n + 1) { clear: left; } .related-posts-two-columns .related-post-column .entry-title, .related-posts-four-columns .related-post-column .entry-title { font-size: 18px; font-size: 1.125rem; } .related-posts-two-columns .related-post-column .entry-meta { font-size: 12px; font-size: 0.75rem; } .related-posts-four-columns .related-post-column .entry-meta .meta-date, .related-posts-four-columns .related-post-column .entry-meta .meta-author { display: inline; } .related-posts-four-columns .related-post-column .entry-meta .meta-date:after { display: inline-block; } /* List */ .related-posts-list li .wp-post-image { max-width: 25%; } .related-posts-list li .entry-header { margin-top: 0; } .related-posts-list li .entry-title { font-size: 18px; font-size: 1.125rem; } } @media only screen and (max-width: 40em) { .related-posts-two-columns .related-post-column .entry-title, .related-posts-four-columns .related-post-column .entry-title { font-size: 16px; font-size: 1rem; } } @media only screen and (max-width: 35em) { /* Columns */ .related-posts-three-columns { margin: 0; } .related-posts-three-columns .related-post-column { float: none; padding-right: 0; width: 100%; } } @media only screen and (max-width: 25em) { /* Columns */ .related-posts-two-columns, .related-posts-four-columns { margin: 0; } .related-posts-two-columns .related-post-column, .related-posts-four-columns .related-post-column { float: none; padding-right: 0; width: 100%; } /* List */ .related-posts-list li .wp-post-image { float: none; margin: 0 0 0.5em 0; max-width: 100%; } } @media only screen and (max-width: 20em) { .related-posts .entry-meta .meta-date, .related-posts .entry-meta .meta-author { display: block; margin: 0; } .related-posts-four-columns .related-post-column .entry-meta .meta-date:after { display: none; } }