Looking at the site’s header i see
<meta id="extViewportMeta" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport">
Yet the site has not been built responsively, so on a mobile device you receive a desktop size site and zooming is disabled. This doesn’t really work well.
You will have to do a pretty big CSS dance to get the site to be adaptive let alone responsive. If you remove the above viewport meta tag, it will allow the mobile device to decide how wide to render it (I.E. 960px on the iPhone). This will be slightly more useable that what is up now. You will also get pinch to zoom functionality back which will be important.
Really your best options are either invoking a mobile plugin or choosing a different theme that is already responsive. It is certainly not impossible to optimize the current theme for mobile, it will take quite a bit of effort to do it.
Basically in the CSS you would write something like:
@media screen and ( max-width: 500px ){
/* CSS to fit the content to mobile here */
}
When that CSS is written you can place the viewport meta tag back into the header. Please note that 500px is an arbitrary value. I would not suggest using device specific pixel values if you can help it (a lot of people use 320px and 480px to target the iPhone, but there are a lot of other mobile devices out there that are not 320px or 480px). Let your content decide where it breaks, don’t decide on a size becuase of a specific device. Some devices get as skinny as 230px. It’s a lot of work and I wish you luck!
Thread Starter
Robby
(@robbymilo)
You are awesome. Thank you so much!
