Question

I do not understand why Twitter Bootstrap is considering the tablet size from 768 to 979, and not from 768 to 1024 (iPad). The problem is that if a client requests a custom design for tablet, that tablet design will not be visible on iPad in landscape mode.

Also if I have a content with sidebar (span9 + span3), if the sidebar is “hidden-tablet”, the content will not expand, in fact it will have the same size and I have to overwrite bootstraps span dimmensions to achieve the desired layout.

Am I doing something wrong?

Answer 1

1) I think the idea here is that in general if someone is requesting a page that is over 980px its more likely that its from a desktop computer than it is from an ipad. Also you could just make your page ipad AND web friendly for those widths :).

If you have to have a different design for landscape ipad and the web, an option would be to do write a bunch of custom css for when the screen is between 980 and 1024px.

@media (min-width 980px) and (max-width: 1024px) {
  //my custom css for ipad landscape
}

2) You are doing it right. All .hidden-tablet does is set display: none;

@media (min-width: 768px) and (max-width: 979px) {
  // ... some other code

  .hidden-tablet {
    display: none !important;
  }
}

It does not do any other type of resizing, so thats on you to do with media queries.