Responsive CSS @media queries

_x000D_ _x000D_ For making responsive my website I'm using media queries like this _x000D_ _x000D_ @media screen and (max-width: 320px){code}_x000D_ @media screen and (max-width: 480px){code}_x000D_ @media screen and (max-width: 640px){code}_x000D_ _x000D_ 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? Also tried this. The code: _x000D_ _x000D_ @media screen and (min-width: 320px){code}_x000D_ @media screen and (min-width: 480px){code}_x000D_ @media screen and (min-width: 640px){code}_x000D_ _x000D_ Full responsive code, The code: _x000D_ _x000D_ /*640px*/_x000D_ @media screen and (min-width : 640px) {_x000D_ .colum {_x000D_ max-width: 960px;_x000D_ margin: 0 auto;_x000D_ }_x000D_ .navbar-header h1 {_x000D_ margin-left: 20px;_x000D_ }_x000D_ .welcome_text h4 {_x000D_ font-size: 25px;_x000D_ }_x000D_ .welcome_text h1 {_x000D_ font-size: 50px;_x000D_ letter-spacing: 20px;_x000D_ }_x000D_ _x000D_ _x000D_ .promo_title h1, .work_title h1 {_x000D_ max-width: 640px;_x000D_ }_x000D_ .promo_title p, .work_title p{font-size: 18px;_x000D_ color: #7e8287;_x000D_ width: 620px;_x000D_ padding: 0;_x000D_ }_x000D_ .promo_list{_x000D_ margin-bottom: 390px;_x000D_ }_x000D_ _x000D_ .fix1{_x000D_ overflow: hidden;_x000D_ }_x000D_ .clear1 {_x000D_ clear: both;_x000D_ margin-top: 20px;_x000D_ }_x000D_ .extramarg {_x000D_ margin-top: 30px;_x000D_ }_x000D_ .rightborder {_x000D_ position: absolute; _x000D_ height: 175px;_x000D_ border-right: 1px solid #d9dbdb;_x000D_ right: 313px;_x000D_ }_x000D_ .single_list {_x000D_ border-right: none;_x000D_ width: 315px;_x000D_ }_x000D_ .rightimg {_x000D_ background: none;_x000D_ right: 0;_x000D_ top: 0;_x000D_ width: 0;_x000D_ height: 0;_x000D_ opacity:0;_x000D_ }_x000D_ .service_list {_x000D_ padding: 60px 25px 20px;_x000D_ text-align: center;_x000D_ }_x000D_ .leftarea {_x000D_ width: 640px;_x000D_ padding: 0 25px;_x000D_ }_x000D_ .service_list h1:before {_x000D_ left: 36%;_x000D_ }_x000D_ .service_item .ss_list {_x000D_ width: 295px;_x000D_ padding-left: 0;_x000D_ padding-bottom: 30px;_x000D_ text-align: center;_x000D_ }_x000D_ .work_title p {_x000D_ margin: 0;_x000D_ }_x000D_ .work_slider {_x000D_ width: 50%;_x000D_ }_x000D_ .slider_detail h3 {_x000D_ padding-top: 60px;_x000D_ }_x000D_ .promo_title h1, .work_title h1 {_x000D_ font-size: 40px;_x000D_ }_x000D_ .msg_area .colum {_x000D_ width: 640px;_x000D_ }_x000D_ .msg_area textarea {_x000D_ width: 570px;_x000D_ }_x000D_ .contact input[type="text"], .contact input[type="email"] {_x000D_ width: 540px;_x000D_ }_x000D_ .submit a {_x000D_ padding: 10px;_x000D_ }_x000D_ .promo_title, .work_title {_x000D_ padding-top: 60px;_x000D_ }_x000D_ }_x000D_ _x000D_ /*480 */_x000D_ @media screen and (min-width : 480px) {_x000D_ .colum {_x000D_ max-width: 320px;_x000D_ margin: 0 auto;_x000D_ }_x000D_ .navbar-header h1 {_x000D_ margin-left: 20px;_x000D_ }_x000D_ .welcome_text h1 {_x000D_ font-size: 25px;_x000D_ margin: 12px 0;_x000D_ letter-spacing: 12px;_x000D_ }_x000D_ .welcome_text h4 {_x000D_ font-size: 15px;_x000D_ }_x000D_ .promo_title h1, .work_title h1 {_x000D_ max-width: 320px;_x000D_ }_x000D_ .promo_title p, .work_title p{_x000D_ font-size: 12px;_x000D_ color: #7e8287;_x000D_ width: 340px;_x000D_ padding:0;_x000D_ }_x000D_ .single_list {_x000D_ border-bottom: 1px solid #d9dbdb;_x000D_ border-right: 0;_x000D_ padding: 20px 0;_x000D_ width: 320px;_x000D_ }_x000D_ .promo_list div:last-child {_x000D_ border-bottom: 0;_x000D_ }_x000D_ .promo_area {_x000D_ margin-bottom: -230px;_x000D_ }_x000D_ .floatleft {_x000D_ float: none;_x000D_ }_x000D_ .leftarea {_x000D_ width: 320px;_x000D_ }_x000D_ .leftarea h1 {_x000D_ text-align: center_x000D_ }_x000D_ .service_list p {_x000D_ padding: 35px 0;_x000D_ text-align: center;_x000D_ }_x000D_ .service_list h1:before {_x000D_ left:75px;_x000D_ }_x000D_ .service_list h1 {_x000D_ font-size: 38px;_x000D_ }_x000D_ .service_list {_x000D_ padding: 60px 0;_x000D_ }_x000D_ .service_item .ss_list {_x000D_ width: 320px;_x000D_ padding-left: 0;_x000D_ padding-bottom: 30px;_x000D_ text-align: center;_x000D_ }_x000D_ .work_slider {_x000D_ width: 80%;_x000D_ margin: 0 auto;_x000D_ }_x000D_ .slider_detail h3 {_x000D_ padding-top: 80px;_x000D_ }_x000D_ .promo_title h1, .work_title h1 {_x000D_ font-size: 30px;_x000D_ }_x000D_ .rightimg {_x000D_ background:none;_x000D_ right: 0;_x000D_ top: 0;_x000D_ width:0;_x000D_ height: 0;_x000D_ opacity: 0;_x000D_ }_x000D_ .contact input[type="text"], .contact input[type="email"], .contact textarea{_x000D_ width:320px;_x000D_ }_x000D_ .submit a {_x000D_ padding: 10px;_x000D_ }_x000D_ .promo_title, .work_title {_x000D_ padding: 40px 0;_x000D_ }_x000D_ }_x000D_ _x000D_ _x000D_ /* Smartphones (portrait and landscape) ----------- */_x000D_ @media screen and (min-width : 320px) {_x000D_ .colum {_x000D_ max-width: 320px;_x000D_ margin: 0 auto;_x000D_ }_x000D_ .navbar-header h1 {_x000D_ margin-left: 20px;_x000D_ }_x000D_ .welcome_text h1 {_x000D_ font-size: 25px;_x000D_ margin: 12px 0;_x000D_ letter-spacing: 12px;_x000D_ }_x000D_ .welcome_text h4 {_x000D_ font-size: 15px;_x000D_ }_x000D_ .promo_title h1, .work_title h1 {_x000D_ max-width: 320px;_x000D_ }_x000D_ .promo_title p, .work_title p{_x000D_ font-size: 12px;_x000D_ color: #7e8287;_x000D_ width: 300px;_x000D_ padding:0;_x000D_ }_x000D_ .single_list {_x000D_ border-bottom: 1px solid #d9dbdb;_x000D_ border-right: 0;_x000D_ padding: 20px 0;_x000D_ width: 320px;_x000D_ }_x000D_ .promo_list div:last-child {_x000D_ border-bottom: 0;_x000D_ }_x000D_ .promo_area {_x000D_ margin-bottom: -230px;_x000D_ }_x000D_ .floatleft {_x000D_ float: none;_x000D_ }_x000D_ .leftarea {_x000D_ width: 320px;_x000D_ }_x000D_ .leftarea h1 {_x000D_ text-align: center_x000D_ }_x000D_ .service_list p {_x000D_ padding: 35px 0;_x000D_ text-align: center;_x000D_ }_x000D_ .service_list h1:before {_x000D_ left:75px;_x000D_ }_x000D_ .service_list h1 {_x000D_ font-size: 38px;_x000D_ }_x000D_ .service_list {_x000D_ padding: 60px 0;_x000D_ }_x000D_ .service_item .ss_list {_x000D_ width: 320px;_x000D_ padding-left: 0;_x000D_ padding-bottom: 30px;_x000D_ text-align: center;_x000D_ }_x000D_ .work_slider {_x000D_ width: 100%;_x000D_ }_x000D_ .slider_detail h3 {_x000D_ padding-top: 60px;_x000D_ }_x000D_ .promo_title h1, .work_title h1 {_x000D_ font-size: 30px;_x000D_ }_x000D_ .rightimg {_x000D_ background:none;_x000D_ right: 0;_x000D_ top: 0;_x000D_ width:0;_x000D_ height: 0;_x000D_ opacity: 0;_x000D_ }_x000D_ .contact input[type="text"], .contact input[type="email"], .contact textarea{_x000D_ width:320px;_x000D_ }_x000D_ .submit a {_x000D_ padding: 10px;_x000D_ }_x000D_ .promo_title, .work_title {_x000D_ padding: 40px 0;_x000D_ }_x000D_ }_x000D_ _x000D_