Recipe Card Styles (SCSS)
Turns the [recipe_card] output into a printable card with a fact strip for times and servings, a two-column ingredient list on wide screens and numbered steps.
Opens WPIDE on
Code
$card-bg: color-mix(in srgb, currentColor 4%, transparent);
$accent: #c2410c;
.recipe-card {
margin: 2rem 0;
padding: 1.5rem;
border-radius: 12px;
background: $card-bg;
.recipe-facts {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
margin: 0 0 1rem;
padding: 0;
list-style: none;
}
h3 {
margin-top: 1.25rem;
color: $accent;
}
.recipe-ingredients {
columns: 2 16rem;
column-gap: 2rem;
}
.recipe-steps li {
margin-bottom: 0.75rem;
}
}
@media print {
.recipe-card {
background: none;
padding: 0;
}
}Notes
Pairs with the Recipe Details meta box snippet; when printed, the card drops its background to save ink.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.