Responsive event pages

Most visitors reach an event from a phone — a social post, a message, a scanned poster. This is the review that decides whether the page works there.

Test properly

1. Use a real phone, not a desktop preview.
2. Use a private window, so you see the visitor's state.
3. Test on mobile data as well as Wi‑Fi.
4. Test on a small phone, not only a large one.

The single event page

• [ ] The subheader title is legible over the image, and not cropped awkwardly.
• [ ] The categories under the title are readable.
• [ ] The date block reads clearly.
• [ ] The details sidebar stacks sensibly rather than crowding the content.
• [ ] The place and organizer wrap without breaking the layout.
• [ ] The telephone link is tappable and dials.
• [ ] Add to my calendar is reachable.
• [ ] Additional link buttons stack, and their labels do not truncate.
• [ ] The registration button is full width and obvious.
• [ ] The remaining-places display reads clearly.
• [ ] The previous/next arrows are usable or hidden, not overlapping content.
• [ ] The introduction is short enough to read before scrolling.
• [ ] Related-content cards stack cleanly.

The registration form

The form opens in a modal, which is the tightest surface on the site:

• [ ] The modal fits the screen without horizontal scrolling.
• [ ] Every field is reachable with the keyboard open.
• [ ] The consent checkbox and its text are readable.
• [ ] The submit button is visible without hunting for it.
• [ ] Success and error messages are visible after submitting.
• [ ] The modal can be closed.

Test with the on-screen keyboard open. A modal that fits when the keyboard is closed can hide its own submit button when it is not.

The search form

• [ ] The filter column stacks above the results, and does not push them off the screen.
• [ ] The date picker is usable with a finger.
• [ ] Checkbox lists are tappable, and nested terms are distinguishable.
• [ ] Result items are readable — image, title, date, place.
• [ ] Load more events is reachable.
• [ ] The loader appears while results load.

If the filter column dominates the screen on a phone, consider hide_calendar="yes" for that page. See Hide the search calendar.

The calendar

A month grid is the hardest element to make work on a phone:

• [ ] The month is readable without pinching.
• [ ] Event titles are legible in their cells.
• [ ] Entries are tappable and open the right event.
• [ ] Navigating between months works with a finger.

If it does not survive the test, put the calendar on its own page and keep the search form as the primary listing.

Performance

• [ ] The event page appears quickly on mobile data.
• [ ] Images do not arrive noticeably after the text.
• [ ] The search form's first results arrive fast enough to feel responsive.

Event images are the usual weight. Upload at the size you publish.

The paid path

• [ ] Get access is tappable and obvious.
• [ ] The checkout completes on a phone.
• [ ] The confirmation page and its enrollment message are readable.

Test the whole purchase on a phone at least once. It is the path with the most steps and the least room.

When to run this review

• Before launch, on a representative event.
• After changing the single event settings.
• After a theme update.
• After adding a language, since translated text is a different length.
• Periodically, because events with longer titles and more content appear over time.