title: Responsive CSS @media queries
body: <p>For making responsive my website I'm using media queries like this</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media screen and (max-width: 320px){code}
  @media screen and (max-width: 480px){code}
  @media screen and (max-width: 640px){code}</code></pre>
  </div>
  </div>
  </p>
  
  <p>but when I try to test my website there is some issue I've facing. One kind of issue is @media 320px is alright but when I re-size  my webpage 320px to 480px or 640px by default 320px is coming and other two queries not working. Even I'm trying with min-width:320px but result is same. Now what should I do?
  My another question is: What is the different between max-width and min width? and Which one should I use when?</p>
  
  <p>Also tried this.
  The code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    @media screen and (min-width: 320px){code}
      @media screen and (min-width: 480px){code}
      @media screen and (min-width: 640px){code}</code></pre>
  </div>
  </div>
  </p>
  
  <p>Full responsive code,</p>
  
  <p>The code:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*640px*/
  @media screen and (min-width : 640px) {
      .colum {
          max-width: 960px;
          margin: 0 auto;
      }
      .navbar-header h1 {
          margin-left: 20px;
      }
      .welcome_text h4 {
          font-size: 25px;
      }
      .welcome_text h1 {
          font-size: 50px;
          letter-spacing: 20px;
      }
      
      
      .promo_title h1, .work_title h1 {
          max-width: 640px;
      }
      .promo_title p, .work_title p{font-size: 18px;
      color: #7e8287;
      width: 620px;
      padding: 0;
      }
      .promo_list{
          margin-bottom: 390px;
      }
      
      .fix1{
          overflow: hidden;
      }
      .clear1 {
          clear: both;
          margin-top: 20px;
      }
      .extramarg {
          margin-top: 30px;
      }
      .rightborder {
      position: absolute;   
      height: 175px;
      border-right: 1px solid #d9dbdb;
      right: 313px;
      }
      .single_list {
          border-right: none;
          width: 315px;
      }
      .rightimg {
          background: none;
          right: 0;
          top: 0;
          width: 0;
          height: 0;
          opacity:0;
      }
      .service_list {
          padding: 60px 25px 20px;
          text-align: center;
      }
      .leftarea {
          width: 640px;
          padding: 0 25px;
      }
      .service_list h1:before {
          left: 36%;
      }
      .service_item .ss_list {
          width: 295px;
          padding-left: 0;
          padding-bottom: 30px;
          text-align: center;
      }
      .work_title p {
          margin: 0;
      }
      .work_slider {
          width: 50%;
      }
      .slider_detail h3 {
          padding-top: 60px;
      }
      .promo_title h1, .work_title h1 {
          font-size: 40px;
      }
      .msg_area .colum {
          width: 640px;
      }
      .msg_area textarea {
          width: 570px;
      }
      .contact input[type="text"], .contact input[type="email"] {
          width: 540px;
      }
      .submit a {
          padding: 10px;
      }
      .promo_title, .work_title {
          padding-top: 60px;
      }
  }
  
  /*480 */
  @media screen and (min-width : 480px) {
      .colum {
          max-width: 320px;
          margin: 0 auto;
      }
      .navbar-header h1 {
          margin-left: 20px;
      }
      .welcome_text h1 {
      font-size: 25px;
      margin: 12px 0;
      letter-spacing: 12px;
      }
      .welcome_text h4 {
          font-size: 15px;
      }
      .promo_title h1, .work_title h1 {
          max-width: 320px;
      }
      .promo_title p, .work_title p{
      font-size: 12px;
      color: #7e8287;
      width: 340px;
      padding:0;
      }
      .single_list {
          border-bottom: 1px solid #d9dbdb;
          border-right: 0;
          padding: 20px 0;
          width: 320px;
      }
      .promo_list div:last-child {
        border-bottom: 0;
      }
      .promo_area {
          margin-bottom: -230px;
      }
      .floatleft {
          float: none;
      }
      .leftarea {
          width: 320px;
      }
      .leftarea h1 {
         text-align: center
      }
      .service_list p {
              padding: 35px 0;
      text-align: center;
      }
      .service_list h1:before {
          left:75px;
      }
      .service_list h1 {
          font-size: 38px;
      }
      .service_list {
          padding: 60px 0;
      }
      .service_item .ss_list {
          width: 320px;
          padding-left: 0;
          padding-bottom: 30px;
          text-align: center;
          }
      .work_slider {
          width: 80%;
          margin: 0 auto;
      }
      .slider_detail h3 {
          padding-top: 80px;
      }
      .promo_title h1, .work_title h1 {
          font-size: 30px;
      }
      .rightimg {
        background:none;
        right: 0;
        top: 0;
        width:0;
        height: 0;
        opacity: 0;
      }
      .contact input[type="text"], .contact input[type="email"], .contact textarea{
          width:320px;
      }
      .submit a {
          padding: 10px;
      }
      .promo_title, .work_title {
          padding: 40px 0;
      }
  }
  
  
  /* Smartphones (portrait and landscape) ----------- */
  @media screen and (min-width : 320px) {
      .colum {
          max-width: 320px;
          margin: 0 auto;
      }
      .navbar-header h1 {
          margin-left: 20px;
      }
      .welcome_text h1 {
      font-size: 25px;
      margin: 12px 0;
      letter-spacing: 12px;
      }
      .welcome_text h4 {
          font-size: 15px;
      }
      .promo_title h1, .work_title h1 {
          max-width: 320px;
      }
      .promo_title p, .work_title p{
      font-size: 12px;
      color: #7e8287;
      width: 300px;
      padding:0;
      }
      .single_list {
          border-bottom: 1px solid #d9dbdb;
          border-right: 0;
          padding: 20px 0;
          width: 320px;
      }
      .promo_list div:last-child {
        border-bottom: 0;
      }
      .promo_area {
          margin-bottom: -230px;
      }
      .floatleft {
          float: none;
      }
      .leftarea {
          width: 320px;
      }
      .leftarea h1 {
         text-align: center
      }
      .service_list p {
              padding: 35px 0;
      text-align: center;
      }
      .service_list h1:before {
          left:75px;
      }
      .service_list h1 {
          font-size: 38px;
      }
      .service_list {
          padding: 60px 0;
      }
      .service_item .ss_list {
          width: 320px;
          padding-left: 0;
          padding-bottom: 30px;
          text-align: center;
          }
          .work_slider {
          width: 100%;
          }
      .slider_detail h3 {
          padding-top: 60px;
      }
      .promo_title h1, .work_title h1 {
          font-size: 30px;
      }
      .rightimg {
        background:none;
        right: 0;
        top: 0;
        width:0;
        height: 0;
        opacity: 0;
      }
      .contact input[type="text"], .contact input[type="email"], .contact textarea{
          width:320px;
      }
      .submit a {
          padding: 10px;
      }
      .promo_title, .work_title {
          padding: 40px 0;
      }
  }</code></pre>
  </div>
  </div>
  </p>