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.
Related
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>
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;
}
}
#media only screen and(max-width: 1132px) {
#yc-contact{
margin-left: 50px;
}
}
#media screen and(max-width: 1132px) {
#yc-contact{
margin-left: 50px;
}
}
The above code works in Safari but fails to work in Chrome. Tried both.
It seems a syntax error. Try to put a space after "and"
#media only screen and (max-width: 1132px) {
#yc-contact{
margin-left: 50px;
}
}
Please Apply this code :
/* ----------- Non-Retina Screens ----------- */
#media screen
and (max-device-width: 1132px)
and (-webkit-max-device-pixel-ratio: 1)
{
#yc-contact{margin-left: 50px;}
}
/* ----------- Retina Screens ----------- */
#media screen
and (max-device-width: 1132px)
and (-webkit-max-device-pixel-ratio: 2)
and (max-resolution: 192dpi)
{
#yc-contact{margin-left: 50px;}
}
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 have a HTML site and that has some images that I do not want to be seen on a mobile devices or on desktop.
for example:
HTML Code: (index.html)
<link rel="stylesheet" type="text/css" href="css/style.css" />
//Image for desktop
<img class="desktop" border="0" src="images/logo.png">
//Image for mobile device
<img class="mobile" border="0" src="images/logo-mobile.png">
CSS Code: (style.css)
/* #Desktop
================================================== */
.mobile {
display: none;
}
/* #Mobile
================================================== */
#media only screen and (max-device-width: 480px) {
.desktop {
display: none;
}
}
I use this CSS code but does not work.
Use CSS3 Media Queries
#media (min-width: 1100px) {
h1:after {
content: 'Large screen';
}
}
#media (max-width: 1100px) {
h1:after {
content: 'Medium screen';
}
}
#media (max-width: 480px) {
h1:after {
content: 'Small screen';
}
}
-DEMO-
The answer is in media queries itself...i used this and it seems to work for me
#media screen and (max-device-width:480px)
The problem is that you are not resetting the display: none on the .mobile class on mobile screen, and your .mobile class elements will remain hidden. You have to add the following to your media query in order to make the .mobile class visible:
.mobile {
display: block;
}
Final coode:
/* #Desktop
================================================== */
.mobile {
display: none;
}
/* #Mobile
================================================== */
#media only screen and (max-device-width: 480px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
EDIT
As I can see, you will have problems to detect which device is a mobile device based on resolution, so I will recommend you to detect it by using the User Agent string, it will have bigger success in your case.
Here is what you should do:
1) Include this in a javascript file loaded on the page:
$(document.body).ready(function(){
var isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
if(isMobile) {
$("html").addClass("mobile-device");
} else {
$("html").addClass("desktop-device");
}
});
2) Change your css to:
/* #Desktop
================================================== */
.desktop-device .mobile {
display: none;
}
/* #Mobile
================================================== */
.mobile-device .desktop {
display: none;
}
This should work for most(maybe 99.9%) of the mobile devices that cand be bought. Hope this helps you.
use media-queries-for-standard-devices
use it like this
/* #Desktop
================================================== */
.mobile {
display: none;
}
.desktop {
display: block;
}
/* #Mobile
================================================== */
#media only screen and (max-width: 480px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
For HTC One try
#media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3){
}
NOTE Don't forget to add this inside tag
<meta name="viewport" content="width=device-width, initial-scale=1">
css:
#media screen and (max-device-width: 480px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
IT will work. see link http://cssmediaqueries.com/what-are-css-media-queries.html