# 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.

- Type: SCSS
- Runs: Site-wide header
- Category: [Custom Post Types & Fields](https://wpide.com/library/category/post-types/)
- Tags: scss, events, styling
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/event-details-scss/

## Code

```scss
$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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Event Details and Upcoming Events Styles (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/