[Plugin: The Events Calendar] Make nice with 322px width

I’m looking for the styles to get my Tribe calendar to work nicely with iPhone and other mobiles. Right now Month view is too wide and spills out over the right side of the page. I’ve looked at these styles in order to make events summaries a smaller font-size, but so far no dice. (6 px is very small, will adjust upward when I see things work.) What am I missing?

Page in question, you must look at on mobile or make browser screen less than 500 wide to see the issue.
http://www.downtoearthwebworks.com/sandbox/events/

@media only screen and (max-width: 500px) {

/* Calendar for Mobile */
.tribe-mini-calendar td,
.tribe-mini-calendar th {
    padding: 0;
}
#tribe-events-pg-template {
    margin: 0 auto;
	max-width: 320px;
	min-width: 320px;
}
.tribe-events-calendar th {
    background-color: #DDDDDD;
    color: #333333;
    height: 10px;
    letter-spacing: 1px;
    padding: 4px 0;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    font-size: 4px; !important;
}
td {
	font-size: 4px !important;
}
.tribe-events-calendar {
	font-size: 4px !important;
}
h3.tribe-events-month-event-title-summary {
	font-size: 6px;
}
#tribe-events-content .tribe-events-calendar div[id*="tribe-events-event-"] h3.tribe-events-month-event-title {
    font-family: sans-serif;
    font-size: 6px; !important;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.25;
    margin: 0;
    padding: 0;
    text-transform: none;
}
}