I can't get the media query to work for different widths.
I checked the meta I tried media all media screen and media only screen.
HTML
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="styles/slicknav.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/jquery.slicknav.min.js"></script>
<script type="text/javascript">
$(document) .ready(function(){$('#nav_menu')
.slicknav({prependTo:"#mobile_menu"});});</script>
CSS
#media only screen and(max-width: 767px){
header img{clear: both;}
header{align-content: center;}
section{float: none;}
aside{float:none;}
section img{max-width: 30%;}
#mobile_menu{display: block;}
#nav_menu{display: none;}
I expect the style rules to work when the width changes.
Try this i noticed you may of had a few syntax errors (If your selector wasn't an id i just assumed it was a class you may have to check that).
#media (max-width: 767px){
.header img{
clear: both;
}
.header{
align-content: center;
}
.section{
float: none;
}
.aside{
float:none;
}
.section img{
max-width: 30%;
}
#mobile_menu{
display: block;
}
#nav_menu{
display: none;
}
}
EDIT After back and forth this is what i have come up with that will work for me on the link provided.
HTML
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>San Joaquin Valley Town Hall</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="styles/normalize.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/slicknav.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/jquery.slicknav.min.js"></script>
<script type="text/javascript">
$(document) .ready(function(){$('#nav_menu') .slicknav({prependTo:"#mobile_menu"});});</script>
</head>
CSS
#media (max-width: 767px){
header img{clear: both;}
header{align-content: center;}
section{float: none !important;}
aside{float:none;}
section img{max-width: 30%;}
#mobile_menu{display: block;}
#nav_menu{display: none;}
}
#media (max-width:479px ){
body{font-size: 90%;}
#mobile_menu{display: block;}
#nav_menu{display: none;}
}
#media (max-width: 959px){
section h1{font-size: 135%;
}
section h2{font-size: 120%}
aside h2{font-size: 120%}
}
Related
I know there is problem related to #media screen out there but sadly it didn't worked for me.
So my style.css look like this
.left-align-item {
margin-left: 20%;
margin-bottom: 80px;
text-align: left;
}
#logo {
margin-top: -65px;
float: left;
margin-left: 20%;
}
ul {
float: right;
margin-top: 24px;
margin-right: 20%;
}
And my responsive.css
#media screen and(max-width: 1360px) {
/*GENERAL*/
.left-align-item {
margin-left: 10%;
}
/*HEADER*/
#logo {
margin-left: 10%;
}
ul {
margin-right: 10%;
}
}
And the head:
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="assets/img/icon.ico">
<link rel="stylesheet" href="assets/css/fa/css/fontawesome.css">
<link rel="stylesheet" href="assets/css/fa/css/brands.css">
<link rel="stylesheet" href="assets/css/fa/css/solid.css">
</head>
If my screen is smaller than 1360px, the left margin is not resizing from 20% to 10%. I can't quite find the problem here.
From the documentation:
Whitespace is required between a not, and, or or keyword and the following ( character. Without this the parser parses it as a different type of token. Details
Your media query needs to have a space between and and the parenthesis (:
#media screen and (max-width: 1360px) {
/*GENERAL*/
.left-align-item {
margin-left: 10%;
}
/*HEADER*/
#logo {
margin-left: 10%;
}
ul {
margin-right: 10%;
}
}
Everything seems fine, except for the order of the tags placed in the head tag. Try posting tag above title. Hope this might resolve the issue.
It might be a specificity issue. Check the order of style links, make sure responsive.css is declared after style.css
Also check your media query syntax: it must have a space between and
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,
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">
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.