Special CSS3 for some browsers
In some special cases when you need special css to handle multiple browsers, here’s how to add new css for each type of browser.
/*this is safari, affects chrome*/ @media screen and (-webkit-min-device-pixel-ratio:0) { .uk-logo{ margin-top:-10%; } } /* firefox issue */ @-moz-document url-prefix() { .uk-logo{ margin-top:-30%; } } /*Chrome issues*/ @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { .nav.navbar-nav li{ font-size: 1.53em; } </code> //add more style to handle mobile if needed @media only screen and (min-width: 768px) and (max-width: 992px) { ul.nav li{ font-size: 1.3em !important; } } } //add new stylesheet file for Safari /*Safari issues*/ @media screen and (-webkit-min-device-pixel-ratio:0) { .nav.navbar-nav li{ font-size:1em; } } //add new stylesheet file for IE /*IE issues*/ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .nav.navbar-nav li a{ font-size: 14.89pt; /*this is perfect & all codes below */ font-size: 15pt; /*remove when done*/ } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (min-width: 200px) and (max-width: 736px) { ul.nav{ width:98%; } } //add stylesheet for mobile responsive @media screen and (min-width: 1024px) and (max-width: 1300px) { //your style here } @media screen and (min-width: 992px) and (max-width: 1024px) { //your style here } @media screen and (min-width: 768px) and (max-width: 1024px) { //your style here } @media screen and (max-width: 768px){ //your style here }