Search code examples
csstwitter-bootstrapmedia-queries

Bootstrap: how to Make the website always operate as "lg"

I have a fully responsive website with the classes hidden-*, visible-* are being used extensively, now i want to let the mobile users to be able to use the desktop version of the website if they click on a button like "Desktop Website".

These are Bootstrap documentations for Disabling Responsiveness:

  1. Omit the viewport mentioned in the CSS docs.
  2. Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
  3. If using navbars, remove all navbar collapsing and expanding behavior.
  4. For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.

I tried it but it's not working!.

The Media Queries still operational.

The hidden-* and visible-* still operational.

So nothing happened, the responsiveness still operational!.

I don't know why it's a difficult thing to do. The website is already configured to run on desktop devices, so i just need to tell the Mobile or Tablet to browse the website like a Desktop does. Is there any way to do that ?

Thanks in advance.

Solution

  • Perhaps the best approach for you would be to compile a separate version of Boostrap without any of its responsive goodies. Check this blog entry on how to do that. Let me know if that helped/worked. Fabio