Skip to content

Instantly share code, notes, and snippets.

@blogjunkie
Last active August 31, 2015 09:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save blogjunkie/4f46f419331c41962f99 to your computer and use it in GitHub Desktop.
Save blogjunkie/4f46f419331c41962f99 to your computer and use it in GitHub Desktop.
Better default styling for Related Posts for WP plugin. Replace the default CSS in the Settings → Related Posts → Styling tab.
.rp4wp-related-posts:after,
.rp4wp-related-posts ul:after {
clear: both;
content: "";
display: table;
}
.rp4wp-related-posts > ul {
margin-left: 0;
padding-left: 0;
list-style: none;
}
.rp4wp-related-posts li {
clear: both;
float: left;
margin-bottom: 1em;
width: 100%;
}
.rp4wp-related-posts .rp4wp-related-post-image {
max-width: 25%;
float: left;
}
.rp4wp-related-posts .rp4wp-related-post-image img {
max-width: 100%;
}
.rp4wp-related-posts .rp4wp-related-post-content {
box-sizing: border-box;
float: left;
width: 75%;
padding-left: 5%;
}
@media screen and (min-width:600px) {
.rp4wp-related-posts ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.rp4wp-related-posts li {
padding-right: 3%;
width: 25%; /* Optionally limit width of each item */
}
.rp4wp-related-posts .rp4wp-related-post-image,
.rp4wp-related-posts .rp4wp-related-post-content {
max-width: 100%;
padding-left: 0%;
width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment