#media only screen css not working on galaxy s4 - html

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.

Related

have html divider respond to pixel size

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>

#media Unknown on IE11

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>

#media tag not working for phtml file

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>

respond.js not working IE8 - even on web server

I'm trying to use/ mock media queries in IE8 using respond.js
I have the attached code all set-up to run under localhost in IIS (just a plain and simple static site). Everything works on Chrome, FF, Safari but not IE (I'm using version 8)
I'm new to front end development and I cannot seem to work out what it is I am doing wrong. Please can somebody take a look and give me any pointers?
Thank you for your time,
Barry.
HTML File;
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Media Query Test</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body>
<div class="wrapper one">This box will turn to pink if the viewing area is less than 600px</div>
<div class="wrapper two">This box will turn to orange if the viewing area is greater than 900px</div>
<div class="wrapper three">This box will turn to blue if the viewing area is between 600px and 900px</div>
<div class="wrapper iphone">This box will only apply to devices with max-device-width: 480px (ie. iPhone)</div>
<p class="viewing-area">
<strong>Your current viewing area is:</strong>
<span class="lt600">less than 600px</span>
<span class="bt600-900">between 600 - 900px</span>
<span class="gt900">greater than 900px</span>
</p>
<script src="/js/respond.min.js"></script>
</body>
</html>
CSS File;
.wrapper {
border: solid 1px #666;
padding: 5px 10px;
margin: 40px;
}
.viewing-area span {
color: #666;
display: none;
}
/* max-width */
#media screen and (max-width: 600px) {
.one {
background: #F9C;
}
span.lt600 {
display: inline-block;
}
}
/* min-width */
#media screen and (min-width: 900px) {
.two {
background: #F90;
}
span.gt900 {
display: inline-block;
}
}
/* min-width & max-width */
#media screen and (min-width: 600px) and (max-width: 900px) {
.three {
background: #9CF;
}
span.bt600-900 {
display: inline-block;
}
}
/* max device width */
#media screen and (max-device-width: 480px) {
.iphone {
background: #ccc;
}
}
Link to respond.js I am using (local version of; https://github.com/scottjehl/Respond/blob/master/dest/respond.min.js)
<script src="/js/respond.min.js"></script>
Should have been
<script src="js/respond.min.js"></script>
Note I have removed the preceeding "/"
I am now "fist pumping" the air as I have media queries in IE 8.
Thanks for your time. I hope this helps!

apply css rule only when device is horizontal

I need to apply some css to a mobile device (all cell phones, android iPhone etc.), but only when the device is horizontal. When the device is vertical, nothing will appear (the page is blank), and a different css will load for desktop.
I've got the desktop CSS mostly working, but can't for the life of me figure out what to do w/ the rest. It's also a huge jumbled mess atm. I've no idea what to try next.
any help would be very much appreciated!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="romneyMorph_edgePreload.js"> </script>
<style>
.edgeLoad-EDGE-455562748 { visibility:hidden; }
.MobileMorph{
outline:1px solid red;
}
#media only screen and (max-device-width : 1223px) and (orientation : landscape){
.DesktopMorph {
display: none;
}
}
#media only screen and (max-device-width : 1223px) and (orientation : portrait){
.MobileMorph, .DesktopMorph {
display:none;
}
}
#media only screen and (min-width : 1224px){
.MobileMorph {
display: none;
}
}
#media only screen and (min-width : 1224px){
.MobileMorph {
display: none;
}
}
</style>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0;">
<div id="everything">
<!--MOBILE-->
<div class="DesktopMorph" align="center">
<iframe src="google.com" width="1024" height="344" frameBorder="0" style="outline: none; border: 0px;"></iframe>
</div>
<!--DESKTOP-->
<div class="MobileMorph" align="center">
<iframe src="index.html" width="690" height="322" frameBorder="0" style="outline: none; border: 0px;"></iframe>
</div>
</div>
</body>
</html>
Media queries can do that:
#media only screen and (orientation: landscape) {
/* css rules */
}
Use "portrait" for vertical.