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>
Related
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'll try to be more specific. I have this stylesheets on my main control
<link href="/css/Fonts.css" rel="stylesheet" />
<link href="/css/bootstrap.min.css" rel="stylesheet" />
<link href="/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="/css/mysite.css" rel="stylesheet" />
<link href="/css/responsive.css" rel="stylesheet" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/explorer.css" />
<![endif]-->
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
my container width for large screen comes from responsive.css where I have this code
#media handheld, only screen and (min-width: 1440px){
{.container:1400px;}
}
when I run my code in crome it is 1400px for large screen ignoring bootstrap container width this
#media (min-width: 1200px){
.container {
width: 1170px;}
}
and this
.container{
width: 940px;
}
but when I run my code in IE8 it picks up bootstrap container width
.container{
width: 940px;
}
and ignors
#media handheld, only screen and (min-width: 1440px){
{.container:1400px;}
}
The problem is I want explorer 8 not to ignore my code for large sreen(1400px). I know I cannot add it in my "explorer.css" as a media query inside a media query like this. i know it won't work.
/* IE8 */
#media \0screen
{
#media handheld, only screen and (min-width: 1440px){
.container:1400px;}
}
So I decided to add !important on this
#media handheld, only screen and (min-width: 1440px){
{.container:1400px !important;}
}
so it began to be of the size I want for the large screen but now it resizes very slowly(due to css3-mediaqueries.js which works slowly) and is not showing up mobile design .So now my question is whether
css3-mediaqueries.js supports mobile? Thanks for trying to help.
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
}
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 { }?
I'm using Bootstrap as my responsive framework.
I have got my own style sheet underneath the Bootstrap CSS files, with own Media Queries in it... but when it comes to viewing my web page on my iPhone 4, the heading and tags dont change to conform the way i want to on my phone.
Here is a snippet of the way my code looks:
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
i set the Media Queries as follow.....
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
I've already cleared the cache on my iPhone, but it's still not working
You may have missed the tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
before your imports.
Please refer to the documentation and ensure you followed all the steps:
http://twitter.github.com/bootstrap/scaffolding.html