media queries

1@media only screen and (max-width: 1200px){
2    /*Tablets [601px -> 1200px]*/
3}
4@media only screen and (max-width: 600px){
5	/*Big smartphones [426px -> 600px]*/
6}
7@media only screen and (max-width: 425px){
8	/*Small smartphones [325px -> 425px]*/
9}

1@media only screen and (max-width: 600px) {
2  body {
3    background-color: lightblue;
4  }
5}

1@media all and (max-width: 699px) and (min-width: 520px) {
2   ul li a {
3    padding-left: 21px;
4    background: url(../images/email.png) left center no-repeat;
5  }
6}

1@media only screen and (max-width: 1200px){
2    /*Tablets [601px -> 1200px]*/
3}
4@media only screen and (max-width: 600px){
5	/*Big smartphones [426px -> 600px]*/
6}
7@media only screen and (max-width: 425px){
8	/*Small smartphones [325px -> 425px]*/
9}
10/*Credit goes to Malario i saved this just in case.....
11https://www.codegrepper.com/app/profile.php?id=43257
12if it helped you should say thanks to him......
13*/

1@media screen and (max-width: 480px) { }
2

1#sidebar ul li a {
2  color: #900;
3  text-decoration: none;
4  padding: 3px 0; 
5  display: block;
6}
7
8@media all and (min-width: 1001px) {
9  #sidebar ul li a:after {
10    content: " (" attr(data-email) ")";
11    font-size: 11px;
12    font-style: italic;
13    color: #666;
14  }
15}
16
17@media all and (max-width: 1000px) and (min-width: 700px) {
18  #sidebar ul li a:before {
19    content: "Email: ";
20    font-style: italic;
21    color: #666;
22  }
23}
24
25@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
26  #sidebar ul li a {
27    padding-left: 21px;
28    background: url(../images/email.png) left center no-repeat;
29  }
30}