Media Queries
CSS
/* Firefox */
@-moz-document url-prefix() { ... }
/* ME */
@supports (-ms-ime-align:auto) { ... }
/* IE */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { ... }
/* Hovers */
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
.element:hover {
color: royalblue;
}
}
/* Desktop first */
@media only screen and (max-width: 1300px) { ... }
@media only screen and (max-width: 1100px) { ... }
@media only screen and (max-width: 992px) { ... }
@media only screen and (max-width: 767px) { ... }
@media only screen and (max-width: 640px) { ... }
@media only screen and (max-width: 480px) { ... }
@media only screen and (max-width: 350px) { ... }
/* Rewrite styles */
@media only screen and (max-width: 1920px) {
[style*=margin][style*="0 -15vw 1rem 8rem"]{margin:0 -4vw 1rem 3rem !important}
.row_f [class*='col_'] {width: calc(100% / 1 - 3.01rem);}
}
/* Phone horizontal orientation */
@media (orientation:landscape) and (max-height:450px) {
footer{padding-bottom:0}
.mobile_phones{display:none}
}