I have written some media queries that do not seem to be working. However when I validate them with W3C it says their are no errors.
Why are my font weights and background colours not changing. My HTML correctly links to my CSS. The following is my CSS:
#media (max-width: 800px) {
body {
background-color: red;
}
h1 {
font-weight: 300;
}
}
#media (min-width: 801px) and (max-width: 1000px) {
body {
background-color: orange;
}
h1 {
font-weight: 600;
}
}
#media (min-width: 1001px) {
body {
background-color: yellow;
}
h1 {
font-weight: 900;
}
}
As requested this is the head:
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Media Query Test</title>
<link type="text/css" rel="stylesheet" src="css/style.css" />
</head>
Make sure you have this in your head tag:
<meta name="viewport" content="width=device-width" />
Found something similar:
CSS3 media queries not working
Wow!
It is late where I am and I have been looking at my code too long.
The problem was in my head. I was using "src" instead of "href" when trying to link my external CSS.
Worst public shaming ever.
Should read:
<link type="text/css" rel="stylesheet" href="css/style.css">
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 want the body of the page to be responsive so that it is easy for the user to read on a mobile site. But when I use this line of code. I get this mess. Any suggestions?
<meta name="viewport" content="width=device-width">
Thanks in advance!
<!-- Try in this way it may help You --->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: yellow;
}
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
</head>
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>
For some reason I can't get my media queries working.... Can someone explain what's going on?
Screen size is at 241 (chrome, ie, ff)
CSS
#media screen and (max-width: 500px)
{
body
{
width: 100%;
background-color: black;
}
#header
{
display: none;
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" />
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="header">
<p>This is my header</p>
</div>
<p>This is a paragraph</p>
</body>
</html>
edited for misspelling
Double check that your media queries are the last items in your style sheet and are not being overwritten by other applied styles e.g.
<style>
#media screen and (max-width: 500px)
{
body
{
width: 100%;
background-color: black;
}
#header
{
display: none;
}
}
body {background-color: white;}
</style>
the example I've given will never change the background-color of the body element as the styling below the media query will over-ride it
What you have works by itself:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#media screen and (max-width: 500px)
{
body
{
width: 100%;
background-color: black;
}
#head
{
display: none;
}
}
</style>
<title>Test</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" />
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="head">
<p>This is my header</p>
</div>
<p>This is a paragraph</p>
</body>
</html>
Check if you have any other media queries that might be overriding this one. Otherwise maybe it's a link to your stylesheet that's the issue,
EDIT: PROBLEM SOLVED. It was the FitVids code causing the JWP to not display. Thanks to all for your help.
I've been staring at my code too long and can't figure out why it's not working after I made a couple of small mods. Can one of you clever folk check it and let me know what I've done wrong?
The page is supposed to have three embedded JWPlayer in it with some random video. The CSS file it is using should be the one for desktop screens, but I also have one there for iphone.
http://www.billarga.com/newsite/
The code below shows the integration of one of the three players.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="Content-Type">
<title>New Site</title>
<script type="text/javascript" src="http://www.billarga.com/newsite/player/jwplayer.js"></script>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="http://www.billarga.com/newsite/css/iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="http://www.billarga.com/newsite/css/ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="http://www.billarga.com/newsite/css/ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="http://www.billarga.com/newsite/css/ipad-landscape.css">
<link rel="stylesheet" media="all and (min-width: 1824px)" href="http://www.billarga.com/newsite/css/screen.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://www.billarga.com/newsite/js/jquery.fitvids.js"></script>
<script>
$(document).ready(function(){
$("#page-wrapper").fitVids();
});
</script>
</head>
<body>
<div id="page-wrapper">
<div id="video-wrapper">
<div id="video">Video 1</div>
<script type="text/javascript">
jwplayer('video').setup({
'flashplayer': 'http://www.billarga.com/newsite/player/player.swf',
'file': 'http://www.billarga.com/newsite/content/0000001/1.mp4',
'controlbar': 'bottom',
'width': '480',
'height': '360'
});
</script>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0;
padding: 0;
color: #000000;
font-size: medium;
}
a { color: blue; text-decoration: none; }
a:visited { color: blue; text-decoration: none; }
a:hover { color: blue; text-decoration: underline; }
h1 { font-size: x-large; text-align: center; }
#page-wrapper {
margin: 0 auto;
width: 100%;
height: 100%;
}
#video-wrapper {
width: 100%;
height: 360px;
}
#video {
float: left;
}
You might try putting your jwplayer inside jQuery's document ready callback, like so:
<script>
$(document).ready(function(){
$("#page-wrapper").fitVids();
jwplayer('video').setup({
'flashplayer': 'http://www.billarga.com/newsite/player/player.swf',
'file': 'http://www.billarga.com/newsite/content/0000001/1.mp4',
'controlbar': 'bottom',
'width': '480',
'height': '360'
});
});
</script>
Did you copy and paste the second and third players from the first one? If so, it might just stick one player on the page until you change the names e.g. video_1, video_2, video_3.