The media querys aren't working for my web page aren't working in IE11.
So I thought I would create a simple test HTML page.
It still fails in IE11 - even though it works in Chrome and Firefox and on Android browsers.
Here is the code:
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'><html>
<head>
<title>Foo</title>
<style type="text/css">
#media (min-width: 640px) {
h1 {font-size:56px;color:#0f0;}
}
#media (max-width: 640px) {
h1 {font-size:9px;color:#00f;}
}
</style>
</head>
<body>
<h1>Test</h1>
</body>
</html>
IE just ignores all styling and inspecting the code it has replaced the style in the inspection window with:
<STYLE type=text/css>
#media Unknown
{
H1 {
FONT-SIZE: 56px; COLOR: #0f0
}
H1 {
FONT-SIZE: 9px; COLOR: #00f
}
}
</STYLE>
I have even tried:
#media all and (min-width: 640px) {
h1 {font-size:56px;color:#0f0;}
}
#media all and (max-width: 640px) {
h1 {font-size:9px;color:#00f;}
}
...and also....
#media all (min-device-width: 640px) {
h1 {font-size:56px;color:#0f0;}
}
#media (max-device-width: 640px) {
h1 {font-size:9px;color:#00f;}
}
...and...
#media all (min-width: 640px) and (max-width:1920) {
h1 {font-size:56px;color:#0f0;}
}
#media all (max-width: 640px) {
h1 {font-size:9px;color:#00f;}
}
The PC I am testing the code on has two screens attached....
is this why IE can't determine the Media??
Very annoying. Can't stand IE.
If anyone can shed some light on why the CSS won't work on IE, I would be very grateful.
Try my code with updated doctype and html tags
<!doctype html>
<html lang="en">
<head>
<title>Foo</title>
<style type="text/css">
#media (min-width: 640px) {
h1 {font-size:56px;color:#0f0;}
}
#media (max-width: 640px) {
h1 {font-size:9px;color:#00f;}
}
</style>
</head>
<body>
<h1>Test</h1>
</body>
</html>
Related
i want to give css for mobile view and tablet view. i have created media tag and wrote the code but its not working i have wrote
at top of the phtml file and wrote class name for which i have give css like below
<code>
<meta name="viewport" content="width=device-width,initial-scale=1.0"> //at top
#media only screen and (max-device-width: 1000px)
{.numbertext
{
font-size: 50px;
color: red;
}
}
</code>
please help me how should i write to get correct output
wrapp your media queries inside the style tag.
<style type="text/css">
#media screen and (max-width: 1000px){
.yourClass{
}
}
</style>
Probably you are missing a style tag.
It should be like this :
<style>
#media only screen and (max-device-width: 1000px)
{
.numbertext
{
font-size: 50px;
color: red;
}
}
</style>
I am trying to make a simple code for desktop and mobile display.
<html>
<head>
<style>
#media (min-device-width: 770px) {
#containermobile {display:none;}
}
body {
background-color: #000000;
}
#media (max-device-width: 769px) {
#containerPC {display:none;}
}
body {
background-color: #ffffff;
}
</style>
</head>
<body>
<div id="containerPC">pc</div>
<div id="containermobile">mobile</div>
</body>
</html>
Yet the background color is not displaying. What am I doing wrong ?
You didn't put the body blocks inside the #media blocks, so the second one just overrides the first one, and you get white background.
Also, for the purpose of testing, you should probably avoid using #000000 (black) and #ffffff (white). The former will hide the text, and the latter is the default background color so you can't be sure whether your code worked.
The following is an example of what will work correctly:
#media (min-device-width: 770px) {
#containermobile {display:none;}
body {
background-color: #444444;
}
}
#media (max-device-width: 769px) {
#containerPC {display:none;}
body {
background-color: #cccccc;
}
}
The CSS is in a .scss file and being minified with Gulp which works without any issues. I'm testing the responsiveness is Chrome(resizing the webpage). I have added
<meta name="viewport" content="width=device-width, initial-scale=1">
HTML
<div class="container text-center" >
<h1 class="banner-title">Welcome Refugees</h1>
</div>
.SCSS
.banner-title {
margin-top: 275px;
font-size: 700%;
}
#media only screen and (min-width: 400px)
and (max-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
.banner-title {
font-size: 500%;
}
}
Is this a common issue?
I've been using $sm, $md, $lg, $xl as SASS variables to represent different sizes.
$sm = 600; // #media screen queries don't compile correctly
$sm = 600px; // #media screen queries work as expected
Hopefully this helps someone
i found this on a blog
http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
profile-pic {
float: left;
width: 250px;
}
#media screen and (max-width: 320px) {
.profile-pic {
width: 100px;
float: none;
}
}
#media screen and (min-width: 1200px) {
.profile-pic {
float: right;
}
}
I'm not sure this is only happens on the galaxy S4, but its what I'm using to test it.
I striped the code down to a bare minimum.
Changed the colors just to test the code. Regular css works, mobile version doesn't get triggered.
Thank you,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>test</title>
<style type="text/css">
#media only screen and (max-device-width : 480px) {
#aaa {
color:#ff7d00;
font-size: 100px;
text-align:left;
}
}
#aaa {
color: #9b9b9b;
font-size: 50px;
text-align:center;
}
</style>
</head>
<body>
<div id="aaa">test</div>
</body>
</html>
It's not working because you're adding the media-query before your actual CSS. Also, you can simply use #media (max-width: 480px) { //styles here for devices whose screen size is less than 480px } instead of #media only screen and (max-device-width: 480px) { //styles here } This should work perfectly:
<style type="text/css">
#aaa {
color: #9b9b9b;
font-size: 50px;
text-align:center;
}
#media (max-width: 480px) {
#aaa {
color:#ff7d00;
font-size: 100px;
text-align:left;
}
}
</style>
Here's a working demo. You can try reducing the width of the result's window and see the styles of the text changing when the window size is reduced beyond 480px.
I have below script, it's doing fine in firefox and chrome. ie9 doesn't show the change of colors.
<style type="text/css">
body {
background-color: #FF77BB;
}
#media screen and (max-width: 960px) {
body {
background-color: #8A2BE2;
}
}
#media screen and (max-width: 768px) {
body {
background-color: #FF8C00;
}
}
#media screen and (max-width: 550px) {
body {
background-color: #7FFF00;
}
}
#media screen and (max-width: 320px) {
body {
background-color: #CC0011;
}
}
}
</style>
Works fine for me, just get rid of the extra } at the very end, the other browsers may not make it an issue but IE9 is very picky, if one thing is off it breaks the whole thing.