Media Query on Viewport

In this example we demonstrate how to use the CSS3 media query on the viewport of the browser. The background image of the title disappears when the viewport of the browser is too small

The CSS code to achieve this is below:

index.html.haml
.container {
  width: 500px;
  }
.container div {
  float: left; 
  margin: 0 15px 0 0;
  width: 235px;
}
@media all and (max-device-width: 320px) {
  .container {
    width: auto;
  }
  .container div {
    float: none;
    margin: 0;
    width: auto;
  }
}