WordPress.com

1. mdwittenberg
   Member
   Aug 1, 2012, 1:59 AM

   I hope to have Google Maps displayed on the website philsbikeshop.com when viewing from a desktop, but disappear when viewing from a mobile phone. The reason is that because the map spans across the page, it is nearly impossible to scroll the page beyond the map when on an iPhone (unfortunately finger swipes control the map).

   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

   The blog I need help with is philsbikeshop.com.

2. thesacredpath
   Staff
   Aug 1, 2012, 7:24 AM

   There is no way using CSS to determine whether someone is on a mobile or not. That requires something like javascript and we can't use that here for security reasons.

3. designsimply
   Staff
   Aug 22, 2012, 5:37 PM

   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.

Topic Closed

This topic has been closed to new replies.