Event Details and Upcoming Events Styles (SCSS)
Lays out the [event_details] facts as a neat two-column list and the [upcoming_events] list with bold dates, collapsing to one column on phones.
Opens WPIDE on
Code
$label-width: 7rem;
$divider: color-mix(in srgb, currentColor 12%, transparent);
.event-details {
display: grid;
grid-template-columns: $label-width 1fr;
gap: 0.5rem 1rem;
margin: 1.5rem 0;
padding: 1rem 1.25rem;
border: 1px solid $divider;
border-radius: 8px;
dt {
font-weight: 600;
}
dd {
margin: 0;
}
@media (max-width: 480px) {
grid-template-columns: 1fr;
dd {
margin-bottom: 0.5rem;
}
}
}
.upcoming-events {
list-style: none;
padding: 0;
li {
padding: 0.6rem 0;
border-bottom: 1px solid $divider;
}
time {
font-weight: 600;
}
}Notes
Pairs with the Event Details meta box and Upcoming Events shortcode snippets.
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.