247AppsStudio Blog

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 &amp; 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
}