Hi there, @swbesecker,
Thanks for getting in touch about this, happy to help here!
The description text in the Upcoming Events widget has its own CSS class, so you can hide it by adding this to your site’s custom CSS (Appearance → Customize → Additional CSS):
.upcoming-events .event-description {
display: none;
}
That will keep the event title, date and time, and location visible, and just remove the description. If you’d also like to hide the location to make it even more compact, you can add this too:
.upcoming-events .event-location {
display: none;
}
That should free up a lot of sidebar space and let more events show in the list.
Hope that helps! Let us know if that does the trick 🙂
First, thank you for your quick response! I copied the text as you wrote it – to remove the description. I put it in the Additional CSS field. It did not make any change to my sidebar at all. I even removed the CSS selector as noted in below the field for the CSS (“Add your own CSS to customize the appearance of the Legacy Widget block. You do not need to include a CSS selector, just add the property and value, e.g. color: red;.”) , and just added “.event-description {display: none;}”. This also made no change at all. I am at a complete loss. Nothing budges at all. Does it take some period of time to make this change on the page? If not, what is going on? Thanks again.
I am also noticing that the Additional CSS code I enter is not being saved. I am clicking on PUBLISH on the top; but, after I leave the page and return, the code is then missing from the field.
Hi @swbesecker,
Thanks for the follow-up! What is probably happening here is that while CSS snippet itself is correct, it might end up in the wrong field.
The field you described (the one with the helper text “Add your own CSS to customize the appearance of the Legacy Widget block. You do not need to include a CSS selector…”) is the per-block Additional CSS field inside the block widget editor. That field scopes styles narrowly to the block wrapper and won’t reliably apply a descendant selector like the one we need here. That also explains why the code isn’t being saved the way you’d expect.
Instead, you’ll want to try adding the snippet to the site-wide Additional CSS panel:
- Go to Appearance → Customize → Additional CSS (this is the global Customizer panel, separate from the widget editor).
- Paste the full rule exactly as-is:
.upcoming-events .event-description {display: none;}
- Click Publish at the top of the Customizer.
- Do a hard refresh on your site (Ctrl+Shift+R on Windows, or Cmd+Shift+R on Mac) to clear any cached CSS.
The complete selector (.upcoming-events .event-description) needs to stay intact, don’t strip it down.
If you’d also like to hide the location line to make the list even more compact, you can add this rule right below the first one:
.upcoming-events .event-location {display: none;}
Keep in mind that the Upcoming Events widget caches the calendar feed for about an hour, so if your events list still looks unchanged after adding the CSS, give it up to an hour and hard-refresh again. More details on how the widget pulls its data are here:
https://jetpack.com/support/extra-sidebar-widgets/upcoming-events-widget/
Let us know how it goes!
