Question

If you look at: http://twitter.github.com/bootstrap/scaffolding.html#responsive they have categories for nearly every device. I’d like to eliminate the last support device entry:

Large display   1200px and up   70px    30px

I’m a backend programmer, not a designer, so my css knowledge is limited. Can someone point me to the files I would need to modify in order to get rid of support for large display?

Thanks!

(PS if anyone is wondering why I would do this, it’s corporate standard blah blah blah 1024px blah blah.)

Answer 1

Ok this wasn’t that hard, starting on line 437 of bootstrap-responsive.css, remove this entire section:

@media (min-width: 1200px) {
...
}

Now just change this one line

@media (max-width: 979px) {

to this:

@media (min-width: 1200px) {

easy hack!

EDIT better explanation:

If you look at bootstrap-responsive.css, and you look at all the crap except the “Media Queries” you’d be left with basically the following outline:

/* Landscape phones and down */
  @media (max-width: 480px) { ... }

  /* Landscape phone to portrait tablet */
  @media (max-width: 767px) { ... }

  /* Portrait tablet to landscape and desktop */
  @media (min-width: 768px) and (max-width: 979px) { ... }

  /* Desktop */
  @media (max-width: 979px) { ... }

  /* Large desktop */
  @media (min-width: 1200px) { ... }

See how it gradually scales up? What I did is remove the last section, then changed the 2nd to last to take it’s place.

EDIT:

BTW, if you use the boostrap customization wizard, you can do this on their GUI by unselecting large monitor support.