I am making a website, in the responsive to mobile @media only screen and (max-width: 767px) , in the development of the site I was reducing the browser to make the style for each break. But by inspecting the browser element and when uploading the site to the mobile version it is not working.
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
width: 1360px;
margin: 0 auto;
padding: 0px;
position: relative;
}
.container:after, .container:before {
content: " ";
display: table;
}
.container:after {
clear: both;
}
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16,.grid-1-2, .grid-1-4, .grid-1-3, .grid-2-3 {
float: left;
margin-left: 10px;
margin-right: 10px;
}
.grid-1 {width: 65px;}
.grid-2 {width: 150px;}
.grid-3 {width: 235px;}
.grid-4 {width: 320px;}
.grid-5 {width: 405px;}
.grid-6 {width: 490px;}
.grid-7 {width: 575px;}
.grid-8 {width: 660px;}
.grid-9 {width: 745px;}
.grid-10 {width: 830px;}
.grid-11 {width: 915px;}
.grid-12 {width: 1000px;}
.grid-13 {width: 1085px;}
.grid-14 {width: 1170px;}
.grid-15 {width: 1255px;}
.grid-16 {width: 1340px;}
.grid-1-4 {width: 292px;}
.grid-1-2 {width: 600px;}
.grid-1-3 {width: 425px;}
.grid-2-3 {width: 300px;}
@media only screen and (min-width: 1024px) and (max-width: 1359px) {
.container {
width: 1024px;
}
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-1-4 {
float: left;
margin-left: 7.5px;
margin-right: 7.5px;
}
.grid-1 {width: 44px;}
.grid-2 {width: 108px;}
.grid-3 {width: 172px;}
.grid-4 {width: 236px;}
.grid-5 {width: 300px;}
.grid-6 {width: 364px;}
.grid-7 {width: 428px;}
.grid-8 {width: 492px;}
.grid-9 {width: 556px;}
.grid-10 {width: 620px;}
.grid-11 {width: 684px;}
.grid-12 {width: 748px;}
.grid-13 {width: 812px;}
.grid-14 {width: 876px;}
.grid-15 {width: 940px;}
.grid-16 {width: 1004px;}
.grid-1-4 {width: 236px;}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
.container {
width: 768px;
}
.grid-1 {width: 28px;}
.grid-2 {width: 76px;}
.grid-3 {width: 124px;}
.grid-4 {width: 172px;}
.grid-5 {width: 220px;}
.grid-6 {width: 268px;}
.grid-7 {width: 316px;}
.grid-8 {width: 364px;}
.grid-9 {width: 412px;}
.grid-10 {width: 460px;}
.grid-11 {width: 508px;}
.grid-12 {width: 556px;}
.grid-13 {width: 604px;}
.grid-14 {width: 652px;}
.grid-15 {width: 700px;}
.grid-16 {width: 748px;}
.grid-1-4 {width: 292px;}
}
@media only screen and (max-width: 767px) {
.container {
width: 300px;
}
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-1-4 {
width: 300px;
margin: 0 0 0px 0;
float: none;
}
}Has anyone ever experienced this?