[Plugin: Ajax Event Calendar] Doesn't work well in a Mobile view using WP Touch (for example).

I have the same problem. It would be great, if this problem could be solved.

+1 — the Calendar isn’t responsive. It fails to display at all on my Nexus S (phone) and Nexus 7 (tablet). I can get the modal to work with a little CSS, though.

Impressive plugin, but not responsive on an iphone. Any updates on the horizon or mobile options? Using Twenty Twelve theme.

If this can help, add the following css rules :

@media only screen and (max-width: 640px) {
#aec-modal-container {
width: 90% !important;
}
#aec-modal-container {
height: auto !important;
}
#aec-modal-container .aec-content {
height: 300px !important;
overflow: auto !important;
}
}

Works for me on iPhone. the popup content is scrollable

I added the iphone CSS but looks the same in an iphone.

https://anadyradventures.com/wordpress/?page_id=7

@gordo019

First of all, there is something wrong with your layout.
Personally I wrote some css rules to show/hide some div and i works fine.
It’s only a question of css rules well defined for each resolution. It’s not so hard to do, with firebug, you should find out how to fix it.

What is the URL of your calendar page?

dti06 – thanks your code helped me! I still have to rotate my iphone to portrait to see the Event Link, but at least the popup is mostly usable instead of mostly unusable ??

gordo019 – did you modify your wp-content/plugins/ajax-event-calendar/css/custom.css with the additional CSS code provided by dti06?

babul…. Yes, I did, I tried in custom.css and in my child themes style.css file. In both cases, Calendar Title: “March 2013” and the Week/Month buttons are not visible, even with the wider landscape mode on an iphone.

You might try something like this in addition to the code above; it’s a bit of an improvement on the iPhone, but doesn’t display all the header options:

.fc-header td {
	white-space:normal !important;
	}
.fc-header-title h2 {
	white-space:normal !important;
	font-size:28px !important;
	}
.fc-button-today {
	display:none !important;
	}
#aec-quickselect {
	display:none !important;
	}
.fc-header-left {
	width:28% !important;
	}
.fc-header-right {
	width:40% !important;
	}

Big thanks to dti06 for a jumpstart on this!