Delete mobile view on magento theme

Question

I have a site: trend-store.nl It is Magento based (1.8) and i have the Mr Handsome theme from galathemes.com But i if you go on your mobile to the site. It has a different look; the mobile look. I don't want the responsive / mobile layout, how can i remove this. I have also look at the css but i cant find anything in the css. Here is the css link: http://trend-store.nl/skin/frontend/default/galamrhandsome/css I have tried allot. But i cant find anything. Can you help me? Thanks,

Answer 1

From inspection the responsiveness is due to the CSS (rather than browser detection or serving a different theme based on the UA of the request).

If you inspect the page source you should spot the code that is controlling the responsiveness:

<script type="text/javascript">
var ADAPT_CONFIG = {
  path: "http://www.trend-store.nl/skin/frontend/default/galamrhandsome_black/css/",
  dynamic: true,
  range: [
    '0px    to 760px  = mobile.css',
    '760px  to 980px  = 720.css',
    '980px  to 1200px = 960.css',
    '1200px           = 1200.css'
  ]
};
</script>

This variable ADAPT_CONFIG is passed into a function in this javascript file

So I think to remove the responsiveness you will need to hack this theme a little bit - and there may be unpredictable consequences. Maybe the theme author would make a small change for you.

I think there are two ways to hack your theme by replacing the code snippet above, or just adding one of these scripts immediately after the snippet above:

<script type="text/javascript">
  var ADAPT_CONFIG = false;
</script>

or

<script type="text/javascript">
var ADAPT_CONFIG = {
  path: "http://www.trend-store.nl/skin/frontend/default/galamrhandsome_black/css/",
  dynamic: true,
  range: [
    '0px    to 760px  = 960.css',
    '760px  to 980px  = 960.css',
    '980px  to 1200px = 960.css',
    '1200px           = 960.css'
  ]
};
</script>

You will need to search in the theme files to find out which file to edit. Probably [path to template]/page/template/html/head.phtml

I recommend a lot of testing. There may be more edits required and apparently you can find more about this responsiveness method here http://adapt.960.gs

**EDIT following comment below

It looks like you also need to change the veiwport meta tag from

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

to

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

assuming 960px is the full page width, but we may be opening a can of worms here.