title: Website does not scale down for mobile screens
body: <p>I am making a web for desktop, tablet and mobile screens. For this I am using css media queries. When I test my website on desktop browser and when I scale my web bowser down then it does change its layout when it reaches to max-width 740px as mentioned in css. But the problem is when I test this on my mobile then it does not change its layout to fit mobile screens.</p>
  
  <p>I am using 12 columns layout system and using <strong><a href="http://lesscss.org/" rel="nofollow">less css</a></strong>. Please help me why it does not change its layout on mobile phones to fit mobile screens.</p>
  
  <p>Here is my css or less css to be precise</p>
  
  <pre><code>html, body {
  height: 100%;
  //overflow: hidden;
  }
  
  body {
  min-width: 360px;
  background-color: #ffffff;
  
  #page {
      width: 100%;
      height: 100%;
      overflow: auto;
  }
  
  .right {
      position: relative;
      right: 0;
  }
  
  // Extend column system (from defaults/layout.css)
  .row {
      clear: both;
  
      &gt; .container {
          max-width: 1024px;
          margin: 0 auto;
          padding: 0 2% 0 2%;
  
          .container {
              max-width: 100%;
              padding-left: 0;
              padding-right: 0;
  
              &amp;.one {
                  width: 8%;
              }
              &amp;.two {
                  width: 16%;
              }
              &amp;.three {
                  width: 25%;
              }
              &amp;.four {
                  width: 33%;
              }
              &amp;.five {
                  width: 41%;
              }
              &amp;.six {
                  width: 50%;
              }
              &amp;.seven {
                  width: 58%;
              }
              &amp;.eight {
                  width: 66%;
              }
              &amp;.nine {
                  width: 75%;
              }
              &amp;.ten {
                  width: 83%;
              }
              &amp;.eleven {
                  width: 91%;
              }
              &amp;.twelve {
                  width: 100%;
              }
  
          }
      }
  }
  
  }
  
  
  
  /*Collapse columns*/
  @media only screen and (max-width: 740px) {
  
  .column, .column.one, .column.two, .column.three, .column.four, .column.five, .column.six, .column.eight, .column.nine, .column.ten, .column.eleven, .column.twelve,
  .column.close-right, .column.one.close-right, .column.two.close-right, .column.three.close-right, .column.four.close-right, .column.five.close-right, .column.six.close-right, .column.eight.close-right, .column.nine.close-right, .column.ten.close-right, .column.eleven.close-right, .column.twelve.close-right {
      //width: auto;
      //float: none;
      //clear: both;
      margin-right: 0;
  }
  
  .column.third {
      display: none;
  }
  
  .column.second {
      width: 77%;
  }
  
  .column.first {
      //min-width: 180px;
  }
  
  }
  </code></pre>