Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS :nth-child() selector for a responsive column layout
/* Food menu- and drinks columns */
.wp-block-column {
padding-top: 2em;
margin-left: 0 !important;
}
@media (min-width: 600px) and (max-width: 781px) {
.wp-block-column {
margin-top: 1em;
}
}
.wp-block-column:nth-child(odd) {
background-color: #701122;
color: #fffdef;
padding-left: 1.5em;
}
.wp-block-column:nth-child(odd) h2 {
color: #fffdef;
}
.wp-block-column:nth-child(even),
.wp-block-column:nth-child(even) h2 {
background-color: #fffdef;
color: #701122;
padding-left: 1.5em;
}
dt {
font-weight: normal;
margin-bottom: 1.5em;
}
dd{
text-align: right;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment