Skip to content

Instantly share code, notes, and snippets.

@neilgee neilgee/checkerboard.css
Last active Nov 27, 2017

Embed
What would you like to do?
CSS for Checkerboard Layout
/* # Checker Content
---------------------------------------------------------------------------------------------------- */
.home-top {
margin: 40px auto;
}
.home-top .featured-content .entry {
padding: 0;
margin: 0 0 30px;
background: #fff;
overflow: hidden;
}
.home-top .featured-content .entry-header,
.home-top .featured-content .entry-content {
padding-left: 7.5%;
padding-right: 7.5%;
float: none;
margin-bottom: 40px;
}
.home-top .featured-content .entry-title {
display: inline-block;
}
.home-top .featured-content .entry-header {
padding-top: 6%;
clear: both;
}
.home-top .featured-content .entry-content {
padding-bottom: 1%;
}
.home-top .featured-content .entry-image {
max-width: none;
width: 100%;
float: none;
height: auto;
max-height: 360px;
}
.home-top .featured-content .entry > a {
margin: 0;
}
@media only screen and (min-width: 500px) {
.home-top .featured-content .entry-image {
float: left;
height: 600px;
max-height: none;
width: auto;
}
}
@media only screen and (min-width: 650px) {
.home-top .featured-content .entry {
margin: 0;
}
.home-top .featured-content .entry > a {
max-width: 50%;
}
.home-top .featured-content .entry-header,
.home-top .featured-content .entry-content {
width: 50%;
float: left;
margin-bottom: 0;
clear: none;
}
.home-top .featured-content .entry-image {
float: left;
height: 600px;
max-height: none;
}
.home-top .featured-content .entry:nth-of-type(even) > a {
float: right;
}
.home-top .featured-content .entry:nth-of-type(odd) > a {
float: left;
}
.home-top .featured-content .entry:nth-of-type(odd) > a .entry-image {
float: right;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.