I'm doing some testing on IE 11 and it's using the CSS for mobile devices and not the "full screen" css. Chrome, Firefox, Opera and Safari all use the correct "full screen" CSS, but IE 11 is grabbing the mobile/media css. I've cleared the cache multiple times and looked at the CSS sheet that it's grabbing, and it is using the most up-to-date version.
In the head I have
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/css/default.css">
</head>
In the CSS file, I have the following after all of the "full sized" css
//"full sized" css
....
@media only screen and (max-width: 479px) {
//mobile CSS
}
IE 11 on my laptop is using the media CSS and I can't figure out why. I know it's using the media only section and not just formatting incorrectly, because when I delete the media only section from the CSS, it then displays as expected.
can you try this:
@media all and (max-width: 479px) {
//mobile CSS
}
with all
you are targeting all devices, and not only the desktop version you are now targeting with screen
.
For mobile only, you would do this:
@media (max-width: 600px) {
//mobile CSS
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With