Mobile template CSS

**gjh42** · 24 May 2011, 07:14 PM

Did you actually replace
@media handheld {
with
@media all and (max-width: 320px) {

This would not change the display width of your site, it would just make it apply to all small windows.

**smcelligott** · 22 Oct 2011, 12:59 AM

I'm having the same problem. Interestingly, some elements scale, and others do not. For example, I use an image slider for my header. The images crop (but don't scale) to what appears to be an appropriate size, yet the directional graphical arrows to move to next/previous image, remain in an unmodified state. Other product images remain in large format size. I'm pretty clued in, but I'm not sure where to start with this one . . .

I am desperate to get a solution to this - here is my rant for those that want to listen:

I think a lot of people don't realise how important this issue is. One year ago, mobile traffic to our site amounted to less than 1.5 percent of our visitors. Over the last six months it accounted for 8.5 percent of traffic, but over the last month, this has grown to 12%. Because our site is not optimised for mobile, we have more than twice the bounce rate, AND most importantly, our conversion rate to buying customer is 40% of that for our not mobile visitors.

These lost opportunities, quite conservatively, will "cost" our small business more than $7200 this year, if the visitors from mobiles remains constant - which obviously nobody imagines will be the case.

When mobile visitors account for 20% of our traffic (which again I believe would be a very conservative estimate) at a constant sales volume, I figure it will cost us just over $12000 per year.

I think there are some massive opportunities for someone to monetise a workable mobile ZenCart platform. I urge anyone and everyone to take this seriously. If we come up with a shared freebie solution that is great, but we need to focus much more of our collective resources on this issue.

Rant over . . . ;)

**delia** · 22 Oct 2011, 01:24 AM

I got questions about what the buyer - phone owner wants to see so I started a new thread to gather opinions. Check it out and tell me what you think

http://www.zen-cart.com/forum/showthread.php?p=1081559

**skylab001** · 19 Apr 2012, 06:44 PM

I'm using this bit of code to check for mobile browsers using the browscap method, it works perfectly. What I'm having issues with is the redirect, I've done exactly what Calljj had written but when you click 'view full site' in the mobile template, it doesn't affect anything, it goes to the redirect.php file and then straight back to the mobile site. I can however redirect to a different site from the redirect page, but this defeats the point of just using a 'mobile template' and having to maintain two sites. Does anybody have any suggestions as to why this is not working properly and switching templates?

Originally Posted by Calljj

To answer my own question, if using the browscap method as Vittorio posted and you want iphone customers to see the full site, then this is how i did it.

...

Hope this helps someone out with creating mobile based zen cart templates for iphones etc

**delia** · 23 Oct 2012, 02:00 PM

Responsive css can work of course but when you are dealing with sites that have a lot of images, like ecommerce, sometimes, the best alternative is to display:none to a lot of elements. The biggest problem is that the element - image or what have you- still loads - slowing down page load on a phone with little bandwidth. So I consider that to be a less than optimum solution. I have made a zen cart mobile template using mobile jQuery where I actually removed elements and applied the jQuery css and styles. It works pretty good but does not work on all phones, only the more recent smart phones - and that's the biggest problem. There's no solution that works optimally for all mobile phones. I keep my fingers crossed that those with the old phones probably don't do much buying. It is true that the biggest buyers on mobile devices are iPhones and iPads. But personally, I don't want to look at a mobile version on my iPhone. I want to see the whole thing - that's why I have an iPhone and an iPad.

So the redirects come into play - do you make the redirects automatic - as responsive design can easily do? I dang sure don't want that on my phone.

Indications are that's exactly what the zen cart team is wrestling with now. It's all about decisions and what direction to go in, not technology because the technology is always going to moving faster than we are - and that's being proved over and over again with more new sized devices coming out so fast, no one can keep up with it - unless one makes that a full-time job.

**kamikaze** · 1 Nov 2012, 05:49 PM

Quick question I have made the .css but my tpl_header.php does not contain

Code:

/**
* load printer-friendly stylesheets -- named like "print*.css", alphabetically
*/
$directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^print/', '.css');
sort($directory_array);
while(list ($key, $value) = each($directory_array)) {
echo '<link rel="stylesheet" type="text/css" media="print" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";
}

So im not sure were to place handheld css code.