If you disable responsive only the viewport meta element in the header is removed.

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

This viewport meta element is responsible that for example the width of the iPhone in portrait view is set to 320px and in landscape view to 480px. If the viewport meta element is not set the default viewport for example on iPhones and iPads is 980px not matter if it is landscape or portrait view.

What does this mean? Basically the site is always completely responsive not matter if you disable responsive or not. You can see this if you resize the browser. But if it is disabled the default viewport is used on mobile devices. Which means the site is shown zoomed out at 980px and looks the same like on desktops.

Just test the site with a mobile device and you will see it is not responsive anymore...

Update

If you want to remove the responsiveness completely on desktops do the following:

Open layouts/template.config.php and replace following code

$css[] = sprintf('.wrapper { max-width: %dpx; }', $this['config']->get('template_width'));

with

$css[] = sprintf('.wrapper { width: %dpx; }', $this['config']->get('template_width'));

Remove following code in the same file

$this['asset']->addFile('css', 'css:responsive.css');

Open js/template.js and replace the whole code with

(function($){  

    $(document).ready(function() {  

        var config = $('body').data('config') || {};  

        // Accordion menu  
        $('.menu-sidebar').accordionMenu({ mode:'slide' });  

        // Dropdown menu  
        $('#menu').dropdownMenu({ mode: 'slide', dropdownSelector: 'div.dropdown'});  

        // Smoothscroller  
        $('a[href="#page"]').smoothScroller({ duration: 500 });  

        // Social buttons  
        $('article[data-permalink]').socialButtons(config);  

        // Match height and widths  
        var match = function() {  
            $.matchWidth('grid-block', '.grid-block', '.grid-h').match();  
            $.matchHeight('main', '#maininner, #sidebar-a, #sidebar-b').match();  
            $.matchHeight('top-a', '#top-a .grid-h', '.deepest').match();  
            $.matchHeight('top-b', '#top-b .grid-h', '.deepest').match();  
            $.matchHeight('bottom-a', '#bottom-a .grid-h', '.deepest').match();  
            $.matchHeight('bottom-b', '#bottom-b .grid-h', '.deepest').match();  
            $.matchHeight('innertop', '#innertop .grid-h', '.deepest').match();  
            $.matchHeight('innerbottom', '#innerbottom .grid-h', '.deepest').match();  
        };  

        match();  

        $(window).bind('load', match);  

    });  

})(jQuery);

That's it. Did it work?

Just adding Pawels's useful info:

Everything is working like it should. As I mentioned before disabling the responsive layout only effect the mobile devices and not the desktop browsers.

Here is how you can remove the responsive layout for desktop browsers:

Step 1:

Open (template)/layouts/template.config.php

Change line 4 from:

$css[] = sprintf('.wrapper { max-width: %dpx; }', $this['config']->get('template_width'));

to:

$css[] = sprintf('.wrapper { width: %dpx; }', $this['config']->get('template_width'));

Remove or comment out line 88:

$this['asset']->addFile('css', 'css:responsive.css');

Step 2:

Open (template)/js/template.js

Remove or comment out line 49-77:

$.onMediaQuery('(min-width: 480px) and (max-width: 959px)', {  
    valid: function() {  
        $.matchHeight('sidebars', '.sidebars-2 #sidebar-a, .sidebars-2 #sidebar-b').match();  
        pairs = [];  
        $.each(['.sidebars-1 #sidebar-a > .grid-box', '.sidebars-1 #sidebar-b > .grid-box', '#top-a .grid-h', '#top-b .grid-h', '#bottom-a .grid-h', '#bottom-b .grid-h', '#innertop .grid-h', '#innerbottom .grid-h'], function(i, selector) {  
            for (var i = 0, elms = $(selector), len = parseInt(elms.length / 2); i < len; i++) {  
                var id = 'pair-' + pairs.length;  
                $.matchHeight(id, [elms.get(i * 2), elms.get(i * 2 + 1)], '.deepest').match();  
                pairs.push(id);  
            }  
        });  
    },  
    invalid: function() {  
        $.matchHeight('sidebars').remove();  
        $.each(pairs, function() { $.matchHeight(this).remove(); });  
    }  
});

$.onMediaQuery('(max-width: 767px)', {  
    valid: function() {  
        var header = $('#header-responsive');  
        if (!header.length) {  
            header = $('<div id="header-responsive"/>').prependTo('#header');  
            $('#logo').clone().removeAttr('id').addClass('logo').appendTo(header);  
            $('.searchbox').first().clone().removeAttr('id').appendTo(header);  
            $('#menu').responsiveMenu().next().addClass('menu-responsive').appendTo(header);  
        }  
    }  
})

If you update the Theme you need to redo this steps.

Hi sascha,
I honestly do not understand, there is something different from what you say and what I see.
Responsive enabled or disabled does not change, if I look at the site on a mobile device the result is the same.

For example, if I look at the template Nano on a mobile device, this is not responsive: http://www.yootheme.com/demo/themes/joomla/2011/nano/

That's a bit of an issue with sites that have vertical navigation! I have just updated a client to the latest nano theme (+ mods) and was hoping to just turn off the responsive parts.

Mapua Health Centre

On the iPad it looks fine but on the desktop if you resize your browser it is still responsive completely screwing the navigation (dropping it off below the content.

I'd rather be able to completely disable the responsive stuff until such time as they talk to me about getting some proper design work done to think it through.

I can live with it but it would be better if you could turn it right off. This also applies to any site where the client hasn't thought about mobile interaction really.

This is exactly what I've been looking for. I just implemented it and it worked great. Thanks Sascha!

(By the way, you should make 2 versions of the Warp Master theme available, both Responsive and Fixed Width.)

I'm just curious, whats the point of having an option to turn off "responsive" but it actually not do that? Why do we have to hack the template for this to work? The Infinite theme is a mess in IE 8 as well...very frustrating.

Bumping this thread hoping someone will have an answer, how can I turn off responsive for desktop on infinite theme?

Hi kayhan,
yes, I deleted the cache, in the Administration and the browser.

ok, I posted the login data in the hidden area
Thanks

yes, I changed the name templates (rename folder template and modify templateDetails.xml)

this code worked - thank you ! exactly what I needed.

Same here, worked!
cheers!

Hi this code works but screws up the "dropdown menus" when the parent menu is set as "Text Seperator? It wont work on IOS. Any fixes for that?

thank you! that´s what i´m looking for!

fingers crossed this has worked on every template Ive used Thank you Sascha

This worked for me as well - thanks very much!

Amazing. Thanks a lot!

this does not work in DRIVE theme?

Sascha, thank you very much. Worked like a treat!

Hi There,
Just tried this with ShowRoom and now there are big chunks missing from my site, any ideas?
Cheers
Aidy

Hi Sacha,

I followed your guide step-by-step yet it does not work with the Infinite theme.

Is there a way to completely remove responsive in desktop mode for infinite? The above examples do not work for this demo.

Needed this a lot... Thank you Sacha !

if i follow the instructions in showroom the sidebar-a background gets transparent.

This is a serious pain as it now involves making sure a programmer can edit files—instead of being able to turn off desktop responsiveness within the template manager. Whereas when we work with Rocket Theme templates, if we need to turn off responsiveness in the template manager it DOES actually turn off the responsiveness for all devices.

Yes its working, but it would be better you had enabled the "Responsive" switch with simple "if else" option like this:

1. Code
// loading if no responsive is selected
if ($this['config']->get('responsive') == 0) $css[] = sprintf('.wrapper { width: %dpx; }', $this['config']->get('template_width'));

2. Code
if ($this['config']->get('responsive') == 1) $this['asset']->addFile('css', 'css:responsive.css');

3. Code
if ($this['config']->get('responsive') == 1) $this['asset']->addFile('js', 'js:template.js');
if ($this['config']->get('responsive') == 0) $this['asset']->addFile('js', 'js:-no-responsive.js');

Therefore you have to create only a "no-responsive.js" with the modified code show above > Step 2

But I understand if you dont want to invest your time in free themes.

PS: Grüße nach Hamburg aus FFM

The solution of Sascha is fine but the background still working in responsive. Look my problem when I minimize the windows:

Normal windows:
IMAGE 1

Minimize windows:
IMAGE 2

How can I fix this problem? I need to disable responsive for all. The site is indusenales.com/portal

An additional fact: All responsive templates fail with resolution 1920x1024 or look NANO 2 with that resolution (So I need to disable any responsive):

SEE PROBLEM

Thank you!