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;
}
}
Related
In my html code below i added a divider which i want the background color to change the blue when it reaches a certain pixel width. Right now my code is having no effect. I want it to the divider to change to blue. How can i get this to work? The code in question is #media (min-width: 551px) {
div { background-color: Blue }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
#media (max-width: 550px) {
p { font-size: 16px; }
}
#media (min-width: 551px) {
p { font-size: 32px; }
}
#media (min-width: 551px) {
div { background-color: Blue }
}
</style>
</head>
<body>
<div class="example">Example DIV.</div>
</body>
</html>
I'm assuming you want the large screen bg color to be lightgrey and the small screen (less than 551px) color to be blue?
If that is the case, you need to specify *max-width on the media query. I would also make sure you call out the div by class so you aren't targeting all your divs.
Try this code.
If I have the colors reversed, you can just switch them.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
#media (max-width: 550px) {
p { font-size: 16px; }
div.example { background-color: blue }
}
#media (min-width: 551px) {
p { font-size: 32px; }
}
</style>
</head>
<body>
<div class="example">Example DIV.</div>
</body>
</html>
You need to add !important to force the CSS according to the screen resolution.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
background-color: lightgrey;
padding: 20px;
}
#media (max-width: 550px) {
p {
font-size: 16px; !important
}
}
#media (min-width: 551px) {
p {
font-size: 32px; !important
}
}
#media (min-width: 551px) {
div {
background-color: Blue !important
}
}
</style>
</head>
<body>
<div class="example"><p>Example DIV.</p></div>
</body>
There are two reasons this isn't working the way you want it to currently.
First, a style declared outside of a media query has higher "importance" than a style declared inside the media query. In order to combat that, you need to use !important after the media query style.
Second, because you are using a more general object name for the media query, it won't have as much hierarchy once again. Instead of using div, you need to use the same div.example inside the media query.
So the two solutions are either:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
padding: 20px; /* removed the bgcolor here... see below*/
}
#media (max-width: 550px) {
div.example {
background-color: lightgrey; /*option 1: move the gray state into a media query, making it the same level of importance as the blue state*/
}
p { font-size: 16px; }
}
#media (min-width: 551px) {
p { font-size: 32px; }
div.example { background-color: blue} /*option 2: use the same specificity of naming inside the media query.*/
}
</style>
</head>
<body>
<div class="example">Example DIV.</div>
</body>
</html>
I am making my website compatible to internet explorer. How do I scale the website in internet explorer in the css hack?
Firstly I coded the website for firefox. That is why I have used some css hacks for some browsers. Now that I wanted to start to scale the website in the different browsers I started with internet explorer. I used a media query for the css hack to identify the internet explorer, but to scale the website, i need another media query. I have already tried to just 'add' the media query to that one which identifies the internet explorer and then I have copied it with min-width of 600, 768 and 998 but it just worked with min-width: 600px and ignored the other media queries. So is there another way to scale (just!) the website in internet explorer or did I code it wrong? Also I have the same question with chrome, where I did not used a media query but I still does not work there too.
/*IE*/ #media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
img.Marat {max-width: 13%;margin-left: 62%;height: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
table.table {margin-top:15%;width:150%;margin-left:-325%;}
.Abstand4 {margin-left:-130%;}
img.Bild4 {margin-left:-1100%;max-width: 80%;height: auto;}
img.Bild6 {margin-left:-410%;margin-top:8.5%;max-width: 58%;height: auto;}
}
/*Chrome*/ #supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
img.Marat {max-width: 50%;margin-left: -50%;height: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
table.table {margin-top:15%;width:150%;margin-left:-20%;}
.Abstand4 {margin-left:-130%;}
img.Bild4 {margin-left:-1100%;max-width: 80%;height: auto;}
img.Bild6 {margin-left:-410%;margin-top:8.5%;max-width: 58%;height: auto;}
}
}
I want to scale the website in internet explorer/chrome, but I do not know how to do it regarding that I had to use css hacks to identify the websites.
Sorry for my bad English and thanks for trying to help me!
If you use several media queries with min-width, you should put the minimum value at the first and the maximum at the last like this:
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* Set the background color of body to tan */
body {
background-color: tan;
}
#media screen and (min-width:600px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body {
background-color: blue;
}
}
#media screen and (min-width:768px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body {
background-color: olive;
}
}
#media screen and (min-width:998px) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
body {
background-color: aqua;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
In this order the media queries work well on IE10+. If the order is wrong, the media queries below will not work.
In the Chrome browser, we should also follow this rule. You could refer the following code:
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* Set the background color of body to tan */
body {
background-color: tan;
}
#supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee)) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
#media screen and (min-width:600px) {
body {
background-color: blue;
}
}
#media screen and (min-width:768px) {
body {
background-color: olive;
}
}
#media screen and (min-width:998px) {
body {
background-color: aqua;
}
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
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 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 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.