mobile site redirect

[AnneGerber]

Okay ... I can't seem to get my site --- petroniuswines.businesscatalyst.com -- to redirect to the mobile version.

I have made a folder on the site root called "Mobile" and have created a separate mobile homepage with different content. I'm checking it on my iPhone and the site is loading the desktop content in the main content div. The version I see on my phone *is* using the phone.css as well as the new code I built inside the mobile template for a select box footer. 

I have the "Phone Content Folder" directed to my "Mobile" folder .. I also have the "Mobile Templates for Responsive Design" enabled.

I have disabled all.css from Main template_phone.dwt so only phone.css is attached to this template. Here is the head links:

        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

        <meta name="viewport" content="width=485, initial-scale=1.0" />

        <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="/css/phone.css"/>

        <link href="/images/favicon.ico" rel="shortcut icon" />

        <script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>

        <script type="text/javascript" src="/js/jquery.main.js"></script>

Here is the head info from Main template.dwt:

         <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

        <link href="/css/all.css" type="text/css" rel="stylesheet" media="all">

        <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="/css/phone.css"/>

        <link href="/images/favicon.ico" rel="shortcut icon">

        <script type="text/javascript">  if ('{system_visitorDeviceClass}' == 'phone') { window.location = 'http://petroniuswines.businesscatalyst.com/mobile/'; }  </script>

        <script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>

        <script type="text/javascript" src="/js/jquery.main.js"></script>

What am I/have I done wrong here? Any help?

I could just rewrite the css to change the styles of the device templates but I really want some different content on the homepage. I could also create content holders for device specific pages ...

Thanks,

Anne

[Ricardo_A1 · Accepted solution]

Hi Anne, to get it done easier you can go to your BC Site Settings>Mobile Support and enable the Mobile Templates for Responsive Site

- It will allow BC to redirect Mobile devices automatically and deliver the right template be it for Tablet or Mobile.

- Bc will create your mobile templates where you can create you custom layouts.

Now on your Desktop layout create a link for DESKTOP as follow:

<a class="blue" href="http://www.website.com/?visitorDeviceClass=phone">Mobile</a>

And on your mobile layout create a link to Desktop as follow:

<a href="http://www.website.com/?visitorDeviceClass=desktop" class="font-12">DESKTOP SITE</a>

I find this way  a lot more easier the down side I am working on is to redirect to exactly the same page the user is when the redirect is requested.