I am trying to test some Ratio media queries:
For example:
#media screen and (min-aspect-ratio: 8/5) { ... }
See the full code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.mq {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
#media screen and (min-aspect-ratio: 8/5) {
.mq {
background-color: red;
}
}
</style>
</head>
<body>
<div class="mq">
Some text here. This DIV can be resized.
</div>
</body>
</html>
The problem with the code above is that it was supposed to go red only when ratio is 18/5 but it's always Red.
What is wrong with this code?
Your code is fine, the CSS says that you need a ratio of at least 8/5, if you drag the screen size around you should see it change when your window is much taller than it is wide.
If you want to have this effect for the div, not the window, then you'll need to handle that with javascript instead of a media query.
var $div = $('.mq');
$div.change(function() {
if ($div.width() / $div.height() < 1.6) {
$div.css('background-color', 'white')
} else {
$div.css('background-color', 'red')
}
});
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>
Below is the script within my head tag. The min-width:500 is working properly but the immediate next query max-width:499px doesn't seem to work, I tried it with and without screen and and even adding it in styles.css stylesheet didn't work. I'm trying it just on my screen, and it is supposed to work. Can anyone spot what I'm doing wrong?
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h2 {
color: orangered;
text-align: center;
}
#media screen and (min-width: 500px) {
body{
color:greenyellow;
background-color: black;
}
}
#media screen and (max-width: 499px) {
body {
color:pink;
background-color: navy;
}
}
</style>
<link rel = "stylesheet" href = "styles.css">
Can anyone tell why is my VSCode not able to predict mid-width or max-width but accepts it while writing.
I Checked your code in VS Code, it is working fine for Background color but it is not changing color of text(H2 tag), i don't think there is any problem with VS Code you can do this to change text color.
When you are writing media query you are changing background color and text in body, but if you are using h2 tag then it is not working so you should write specific code for h2
Try below code....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h2 {
color: orangered;
text-align: center;
}
#media screen and (min-width: 500px) {
h2 {
color: green;
}
body {
background-color: black;
}
}
#media screen and (max-width: 499px) {
h2 {
color: pink;
}
body {
background-color: navy;
}
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>TechWithVP</h2>
Some other text
</body>
</html>
I have the following code, which I am getting from a tutorial.
When I run on Chrome, or Firefox, all the two lines are displaying no matter if I resize the window or not. What am I doing wrong?
<html>
<head>
<style>
#content-desktop {display: block;}
#content-mobile {display: none;}
#media screen and (max-width: 768px) {
#content-desktop {display: none;}
#content-mobile {display: block;}
</style>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<div class="content-desktop">
This is the content that will display on DESKTOPS.
</div>
<div class="content-mobile">
This is the content that will display on MOBILE DEVICES.
</div>
<body>
</body>
</html>
First, you're using class="content-desktop" and class="content-mobile" and your CSS is expecting id because you used #content-desktop and #content-mobile.
Secondly, you forgot to close your bracket.
In CSS, you need to use the dot . to select class and # to select id.
Try this :
.content-desktop {display: block;}
.content-mobile {display: none;}
#media screen and (max-width: 768px) {
.content-desktop {display: none;}
.content-mobile {display: block;}
}
You're never closing the bracket opened here:
#media screen and (max-width: 768px) {
Therefore, the entire #media rule is dropped by the parser. Simply close it where it should be closed (probably before </style>).
You never closed the brackets, you're using # to target class you need to use .
also you're div's were outside the body tag. Further more you need to have a query for the above scaling as well in this case. the following code is tested. you can run it directly.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.desktop {
background-color: yellow;
padding: 20px;
}
#media screen and (max-width: 600px) {
.desktop {
display: none;
}
.mobile{
background-color: red;
padding: 20px;
}
}
#media screen and (min-width: 600px){
.mobile{
display: none;
}
}
</style>
</head>
<body>
<h2>Hide elements on different screen sizes</h2>
<div class="desktop">Show on desktop but hide on mobile.</div>
<div class="mobile">Show on Mobile but hide on desktop</div>
</body>
</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.
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!