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
}
Related
My responsive design is working in every browser but Safari. Here is a screenshot of the code in the main file and in the CSS file. Is there something I have missed? Why isn't this working?
I should add that the media query works perfectly in the HTML file in a tag but will not work in a seperate CSS file.
Thank you in advance
/* Nav Bar Dynamic */
#media screen and (max-width: 1999px) {
/* code here */
}
#media screen and (min-width: 2000px) {
/* code here */
}
/* End NavBar dynamic */
<head>
<link rel="stylesheet" href="/Styles/newStyle.css"/>
<link rel="icon" href="/Images/manLogo.png">
<script src="/NewSite/JavaScript/exploreScript.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
I need to create desktop and mobile versions of the site. I decided to use media queries in CSS. But when I coded them, I found out that they aren't working and I don't know how to fix them. To fix this issue I went to Youtube where found this example, but I implemented that I found that the media query doesn't work. Then I went to stack and found a similar problem. In that case, it was fixed by adding a meta tag in the head. I did that, but it didn't help me. It wasn't work in chrome and Mozilla.
body{
color:red;
}
#media screen and (max-width: 600){
body{
color: blue;
}
}
<!DOCTYPE html>
<html>
<head>
<title>The car dealer site</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<h1>Title</h1><br>
<h2>Subtitle</h2>
</body>
</html>
You need to specify the units for your max-width property. Change the line
#media screen and (max-width: 600){
to
#media screen and (max-width: 600px){
And try it again
I'm new in CSS, especially with media queries.
I've added this to my header tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and this in my body
<img id="title" class="title" src="image/ti.jpg" >
and at the end in my CSS file
#media screen and (max-width : 570px){
.title{
width: 80%;
}
}
My problem is that when I use device mode in Chrome developer tools, this code works fine, but when I change the size of explorer instead of operating in
width=570px
It happens in 160px.
Hi guys I've been trying to work on iPhone 6 CSS (responsive),but i have no luck the iPhone 5 and 6 CSS is working fine in chrome iPhone emulator and http://mobiletest.me/ ,but the same style is not working on the actual device.
Anyone have idea?
My media queries are,
#media only screen and (max-width: 480px) {}
and
#media only screen and (max-width: 599px) {}
also tried
#media only screen and (max-width: 649px) {}
Help.
Try to use <meta name="viewport" content="width=device-width, initial-scale=1"> between your <head></head> For more info visit https://css-tricks.com/snippets/html/responsive-meta-tag/
Add this to the top of <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
I have created a responsive email template and the problem is media queries are not working in below IE10 browser. I have used js library to make it run but it is not working.
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
#media screen and (max-width: 600px) {
/*widths for standard blocks*/
table[class=w15], td[class=w15], img[class=w15] {width:15px !important;}
table[class=w170], td[class=w170], img[class=w170] {width:290px !important;}
table[class=w180], td[class=w180], img[class=w180] {width:145px !important;}
table[class=w200], td[class=w200], img[class=w200] {width:320px !important;}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
Web link url:
http://silista.in/praveen/template-1.html
Best media query hacks for IE would be
IE10 #media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {}
IE8 #media \0screen {}
IE7 #media screen\9 {}
You can add your IE specific CSS code within any of the media queries above.
Read more here: http://browserhacks.com/
I also saw IE 9 is #media screen and (min-width:0\0) {}
Question - Can you just add that snippet of code in the style tags or do you also need to add all applicable CSS in between the { }?