"UPCOMING EVENTS" title hidden on ultra wide screen

[brendonthiede]

On an ultra wide display, the text "UPCOMING EVENTS" is obscured by the bacground-image of the events section (#events). Both the text and the image are white, making the text unreadable where they overlap. Here is at least some of the relevant css as observed from Chrome:

@media (min-width: 768px)
section[data-v-07a400fa] {
    /* background-color: transparent; */
    /* background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiP…AgMCAxNTY1IDcyMiAxOTA0IDE0MzkgMTU2NSI+PC9wb2x5Z29uPgogIDwvZz4KPC9zdmc+Cg==); */
    /* background-position: center top; */
    /* background-repeat: no-repeat; */
    /* background-size: cover; */
}

Examples here are at 3423 x 778 and 2587 x 778

The next event card also looks a little odd to me personally, but I don't know if that's the intended style.

[egillespie]

Wow, yeah, that looks hideous and has accessibility issues as well. I see that the day-of-the-week labels on the calendar can also be hidden.

I'll look into ways to reproduce it on my smaller screen and think of ways to maintain the spirit of the design while ensuring the headings are always visible.

[brendonthiede]

I see that using the Chrome dev tools with the device emulator, you can specify a custom screen resolution, but it will shrink to fit by default, and when I tried "zooming", there is no horizontal scroll :-(

Using Edge, I see that if I dock the toolbar to the bottom, I can scroll side to side when creating an emulated "Ultra Wide" screen (custom resolution).

[egillespie]

Right on. I'll use the device emulator to try out some changes in dev, then ask if you (@brendonthiede) and @kentyunge can take a look in the staging environment on real wide screens before deploying to prod.

Thanks for the recommendation! 😁