Responsive Design Yes, But Not Too Small

• Client: I would like a cheezeburger please!
• Server: For sure, sir how many pixels do you have?
• Client: less than 320 pixels.
• Server: Oh, you must be kidding. Let me feed you with the huge hummungus design.

So there is a combination of User-Agent Sniffing and mediaqueries. Once the User-Agent is identified as mobile, the device is sent a content which is for mobile devices with a CSS containing the following instructions:

@media (min-width: 320px) and (max-width: 767px) {
  .subnavbar {
    display: none;
  }

This rule will not match if the screen is smaller than… 320px. It's one of the issue that people often forget with responsive design. It's not about adjusting your Web site for mobile. It is about enhancing your design for bigger screens. Always start to design for the smallest screen from 0 to a certain point that you have chosen. This is your basic CSS. Do not put it in mediaqueries. Then and only then add mediaqueries for targeting bigger screens. One way to achieve that with the rule above would have been

.subnavbar {
    display: none;
  }

@media (min-width: 767px) {
  .subnavbar {
    display: block;
  }

So in the bug here, some mobile devices such as the geeksphone peak have a screen.width: 315. If you need to test your mobile screen parameters use Andreas Bovens' neat tool

Update 2013-09-18

Read that post about Media Queries by Brad Frost. Spot on.

Hope it helps.

Otsukare!