Make my events page responsive

at the moment this is not available by default and you might need additional css styling or coding to make this work.

Oh what a shame, thanks anyway.

sure wouldn’t be super hard to change the default formatting on a fresh install to NOT use tables, would it?

I’ve been using EM for years, and have previously re-designed the event listings pages to BE responsive, but I was somewhat shocked to do a new install today and discover it STILL uses tables in the default event formatting!!

here is some CSS i’ve used, if you find it helpful @saba_laura… i don’t currently use it, so no longer have the markup available, but it’s fairly straightforward: (creates 1/3 width boxes for the events…)

#em-wrapper h2 { clear: both; }

#events { width: 100%; }

.eventlist { padding: 1%; margin: 1%; border: 1px solid #9ea341; height: 275px; float: left; clear: none; border-radius: 5px; }

.eventlist { max-width: 29%; }

.eventlist p { line-height: 110%; }

.eventlist img { width: 50%; float: right; padding: 5px; }

.eventdate { font-size: 1em; font-weight: 500; font-family: “Open Sans”, Arial Black, Sans-Serif; color: #af42af; }

.eventlink, .eventlink a { font-size: 1.1em; font-family: “Open Sans”, Arial Black, Sans-Serif; color: #BA9F00; font-weight: bold; line-height: 0.75em; overflow: hidden; }

.eventlist p.eventlocation { font-size: 0.75em; font-style: italic; }

.eventnote { font-size: 0.85em; line-height: normal; }

.entry table td { vertical-align: top; }

.fullcalendar a { font-size: 2em; }

.fullcalendar ul { margin: 0 5px 0 18px; }

.fullcalendar ul li { line-height: normal; text-align: left; }

.fullcalendar ul li a { font-size: 1em; }
@media only screen and (max-width: 719px) {
.eventdate { font-size: 0.85em; }
.eventlink, .eventlink a { font-size: 1em; }
.eventnote { display: none; } }