User Tools

Site Tools


Sidebar

startup_tutorial_and_checklist:design_configuration:force_desktop_design_for_all_devices

Force Desktop View For All Devices

<tip c w>Warning: Geodesic Solutions does not recommend doing this until you fully understand what it will be doing. In some cases it may be better to just start with a design that is not responsive. But if you really want to use a design that uses RWD such as the default design, but want to remove the "responsive" part of the design (in other words "force the desktop view" for everyone), the instructions on this page will help you with that.</tip>

Within the new v7.3 default design comes the RWD feature which will display differently within mobile devices than it does within a desktop browser. You can see this behavior by opening your installation in your smartphone browser or desktop with the browser window width very small. This behavior is built into the html/css of the default design and there is no switch within the admin tool to change this behavior. Note that it is NOT using different templates or anything like that, it is just built into the templates to change the look and layout to fit the screen size. But you can still force it to show like it would on a full desktop display within all devices, by copying the contents of old_ie.css to your custom.css file.

Note that you probably will not have a copy of old_ie.css in your own template set, you will find it in:

geo_templates / default / external / css / old_ie.css

Just copy the full contents of that CSS file to your custom.css CSS file within your own template set. That will make the desktop display show in all devices. The design will not switch to mobile view no matter what width the browser window is. Or to be more accurate, this removes the "responsive" parts of the design and forces it to always show like it is on a desktop, even on smaller screens.

<tip c n>Note: The old_ie.css CSS file is one that is loaded for Internet Explorer 8 (IE8) and older versions. It is used to force IE8 to use the desktop version, because IE8 and older versions of IE do not work with the RWD, they simply are not able to be made "responsive". So by copying the contents of this CSS file to your own custom.css, you are enforcing those changes for "everyone" not just for people using older versions of IE.</tip>

Once you do this, you should see that the website shows the full version, but it forces you to scroll on mobile devices, and the pinch to zoom will not work. To enable the zoom ability, you will need to remove the viewport meta tag from your templates1). To do that, remove the following tag from your templates:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
1)
Such as the front_page.tpl template, and others that end with "_page.tpl"
startup_tutorial_and_checklist/design_configuration/force_desktop_design_for_all_devices.txt · Last modified: 2014/09/25 16:55 (external edit)