Is there a CSS class or something that I can assign to the map element so that it will disappear for the mobile version?

You can do that with media queries based on screen size. Here is an example you can try:

@media only screen and (max-width: 480px) {
	.content iframe {
		display: none;
	}
}

There are a few caveats. The option above doesn't prevent the map from loading, it only hides it. Also, it hides all iframes within content (you could change this if you wrapped the map in a tag with a unique id or class using the HTML editor).

However, I wouldn't recommend hiding the map at all. I checked out http://philsbikeshop.com/ on my iPhone and I was able to scroll to the bottom pretty easily. iPhone users tend to be savvy when it comes to getting around like that. Also, the map is at the bottom of the page and so it doesn't seem that someone would be missing much if they actually couldn't get it to scroll for some reason. I vote for keeping the map. :)

Your site looks great! Blaskan seems to be a really good theme choice for you, and I love seeing when that happens.

Is there a CSS class or something that I can assign to the map element so that it will disappear for the mobile version? Even better, I'd like to have it be replaced with a small static picture of a map.

The theme is single column Blaskan.

I DID NOT buy custom CSS privileges and hope that I won't have to.

Thanks,
Mitch