I can't figure out the issue. I searched a lot and after that. I am here for help so guys please help me. Below is the HTML I use:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
and these are the media queries
#media all and (max-width: 1400px) { }
#media all and (max-width: 1024px) { }
#media only screen and (max-width: 768px) { }
#media only screen and (max-width: 480px) { }
#media only screen and (max-width: 320px) { }
Help me identify what is wrong.
#media all and (min-width: 1400px) {
}
#media all and (max-width: 1399px) and (min-width: 1024px) {
}
#media all and (max-width: 1023px) and (min-width: 768px) {
}
#media all and (max-width: 767px) and (min-width: 480px) {
}
#media all and (max-width: 479px) and (min-width: 320px) {
}
#media all and (max-width: 319px) {
}
This in <head></head>
<meta name="viewport" content="width=device-width, user-scalable=no" /> <-- user-scalable=yes if you want user to allow zoom -->
change you #media style as this // change width as per your requirements
#media only screen (max-width: 500px) {
// or as per your needs, as I try to explain below
}
Now I try to explain maybe..:)
#media (max-width:500px)
for a window with a max-width of 500px that you want to apply these styles. At that size you would be talking about anything smaller than a desktop screen in most cases.
#media screen and (max-width:500px)
for a device with a screen and a window with max-width of 500px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other media types the most common other one being print.
#media only screen and (max-width:500px)
Here is a quote straight from W3C to explain this one.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
As there is no such media type as "only", the style sheet should be ignored by older browsers.
I try to put some more information here, gathered from web.
If
That's what media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside.
And
The keyword and.
#media (min-width: 600px) and (max-width: 800px) {
html { background: red; }
}
Or
Comma separate.
#media (max-width: 600px), (min-width: 800px) {
html { background: red; }
}
Technically these are treated like to separate media queries, but that is effectively and or.
Not
Reverse the logic with the keyword not.
#media not all and (max-width: 600px) {
html { background: red; }
}
Just doing not (max-width: 600px) doesn't seem to work for me, hence the slightly funky syntax above. Perhaps someone can explain that to me. Note that not only works for the current media query, so if you comma separate, it only affects the media query it is within. Also note that not reverses the logic for the entire media query as a whole, not individual parts of it. not x and y = not (x and y) ≠ (not x) and y
Exclusive
To ensure that only one media query is in effect at time, make the numbers (or whatever) such that that is possible. It may be easier to mentally manage them this way.
#media (max-width: 400px) {
html { background: red; }
}
#media (min-width: 401px) and (max-width: 800px) {
html { background: green; }
}
#media (min-width: 801px) {
html { background: blue; }
}
Logically this is a bit like a switch statement, only without a simple way to do "if none of these match do this" like default.
Overriding
There is nothing preventing more than one media query from being true at the same time. It may be more efficient to use this in some cases rather than making them all exclusive.
#media (min-width: 400px) {
html { background: red; }
}
#media (min-width: 600px) {
html { background: green; }
}
#media (min-width: 800px) {
html { background: blue; }
}
Media queries add no specificity to the selectors they contain, but source order still matters. The above will work because they are ordered correctly. Swap that order and at browser window widths above 800px the background would be red, perhaps inquisitively.
Mobile First
Your small screen styles are in your regular screen CSS and then as the screen gets larger you override what you need to. So, min-width media queries in general.
html { background: red; }
#media (min-width: 600px) {
html { background: green; }
}
Desktop First
Your large screen styles are in your regular screen CSS and then as the screen gets smaller you override what you need to. So, max-width media queries in general.
html { background: red; }
#media (max-width: 600px) {
html { background: green; }
}
You can be as complex as you want with this.
#media
only screen and (min-width: 100px),
not all and (min-width: 100px),
not print and (min-height: 100px),
(color),
(min-height: 100px) and (max-height: 1000px),
handheld and (orientation: landscape)
{
html { background: red; }
}
Note the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Not sure how useful that ever was / still is.
And for media queries priorites
sources : one two three four five
If you have not defined css properties for different medias, how do you expect the browser to render it?
You need to for example:
#media only screen and (max-width: 480px) {
#header
{
width:100%
background:red;
}
}
Related
I have a requirement where a CSS rule applies between 2 ranges and then above a breakpoint. For example: I need my background to be green, unless the width is 750-800, 850-900 or 900+.
I have tried the following but it does not seem to work:
.foo {
background: green
}
#media all
and (
((min-width: 750px) and (max-width: 800px)),
((min-width: 850px) and (max-width: 900px)),
(min-width: 950px)
) {
.foo {
background: red;
}
}
See: http://jsfiddle.net/njt1982/c2a0yuLh/
If my browser width were 775px then both criteria are met, aren't they? (I am "all" and I am within the first range).
Is what I want to do even possibe?
Update
I found a method below: https://stackoverflow.com/a/33786265/224707
However it involved repeating the "all and" part. Is there any way to "group" parts? eg x AND (y OR z)?
Your syntax was incorrect. You were adding another set of () to your #media rule.
DEMO
Also, you don't need to explicitly state all, the lack a media-type define is implied as all - docs
div {
background: green;
}
#media
(min-width: 650px) and (max-width: 700px),
(min-width: 750px) and (max-width: 800px),
(min-width: 850px) {
div {
background: red;
}
}
<div>div</div>
As per usual, I spend ages on something only to figure it out moments after asking...
.foo {
background: green
}
#media all and (min-width: 750px) and (max-width: 800px),
all and (min-width: 850px) and (max-width: 900px),
all and (min-width: 950px) {
.foo {
background: red;
}
}
See: http://jsfiddle.net/njt1982/zyjnvjpz/
I am in despair. I am trying to make a website and make it mobile-friendly and responsive, however, I cannot seem to get any kind of media query to work at all! All my sizes, width and heights are in "%/em" and my font-sizes are in "vw/em". The biggest problem I get is that, as the screen shrinks, so does my text, to the point where it simply becomes eye-straining to read! I don't see relevant to send any code but if need be, I shall send some of my code (my website is still offline and I cannot put it out there if this problem isn't fixed).
Here's what I have tried:
I have tried putting this in my tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
No success when I try media query in a tab or in a separate css stylesheet.
I have tried removing it aswell.
I have tried these media queries for my font-sizes:
#media (max-width: 400px) {
body { font-size: 60%;}
}
#media only screen and (max-device-width: 800px) {
body {
font-size: 80%;
background-color: blue;
}
}
#media (max-width: 1100px) {
body { font-size: 120%;}
}
I have also tried other media queries but absolutely NOTHING changes at all! Am I doing something wrong? Probably but what?!! This is leading to so many problems! I cannot change my header according to different screen sizes, I cannot change my display, my header links are a mess, etc.
Also, please note that I am a beginner and I do not use any javascript, bootstrap or whatever.
Thank you in advance for your help!
Your queries are a little weird. Perhaps with some logical constrains you can achieve what you are looking for? This is what I mean:
#media (max-width: 400px) {
body{
background-color: yellow;
}
}
#media (min-width: 401px) and (max-width: 800px){
body {
background-color: blue;
}
}
#media (min-width: 801px) and (max-width: 1100px) {
body {
background-color: purple;
}
}
#media (min-width: 1101px){
body{
background-color: orange;
}
}
In my humble opinion, setting the intervals using both min-width and max-width help me visualize what's going on better. This pen shows the colors changing whenever you change the width. It doesn't do much good, but it's something to get started with media queries.
EDIT:
Pen contains transitions between colors because cool
Usually, it's better to use media queries based on minimum screen width. Here is an working example with the code you posted:
Codepen: http://codepen.io/anon/pen/eNJXXp
#media (max-width: 400px) {
p { font-size: 60%;}
}
#media (min-width: 400px) {
p {
font-size: 80%;
background-color: blue;
}
}
#media (min-width: 800px) {
p { font-size: 120%;}
}
Help! I created a Heroku app and my CSS3 #media queries aren't working on mobile devices(checked phone and tablets already). Weirdly, they only work on web browsers(I've checked by resizing pages in chrome and firefox).
I've already included the viewport meta tag in my html document:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" >
And here's a portion of my #media query syntax:
#media only screen and (max-device-width: 361px) {
.realstff-wrapper {
height: 88vh;
}
#gall-box {
display: none;
}
#img-caption {
float:right;
right: 0em;
height: 20px;
width: 200px;
}
#img-block {
height: 100vh;
overflow: hidden;
}
}
I've tried changing #media syntax to these styles, but none of them seem to do the trick:
#media (max-width: 843px){ }
#media (max-device-width: 843px){ }
#media (max-width: 843px) and (max-device-width: 843px) { }
#media screen (max-device-width: 843px){ }
#media screen and (max-device-width: 843px){ }
#media only screen and (max-device-width: 843px){ }
#media only screen and (max-device-width: 843px), (max-width: 843px) { }
#media only screen and (max-device-width: 843px), only screen and (max-width: 843px) { }
I really can't figure out why it's acting out on me :( Kudos for whoever can help solve this problem.
Solved my own problem. The #media syntax I originally used actually worked in conjunction with view metatag.
Turns out I just wasn't "git commiting" my changes correctly through command line.
Embarassing..heh...
I have added the following code to my style.css file in my wordpress theme but it doesn't work. I want the body background to change for screen widths between 768 and 1024px
CSS:
#media screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
body {
background: #fff;
border-top: 2px solid #DDDDDD;
}
}
One of possible solutions is including
<meta name="viewport" content="width=device-width, initial-scale=1.0">
To head tag
You might have an issues with the order of the media query in which you mentioned the styles
check this fiddle, change the browser width to see the the media query in action
#media screen and (max-width : 1500px) {
body {
background: #000;
border-top: 2px solid #DDDDDD;
}
}
#media screen and (min-width : 768px) and (max-width : 1024px) {
body {
background: #fff;
border-top: 2px solid #DDDDDD;
}
}
This fiddle works fine, but if you change the order of the media queries it wont work...try it for yourself!
CSS always selects the last style that was declared if multiple style are found for an attrib.
for e.g :
#media (max-width: 1024px) {
body {
background: black;
}
}
#media (max-width: 768px) {
body {
background: white;
}
}
for 765px ( since both m.q cover this width ) color selected would be white
sometimes one may miss adding px at the end of the number
#media screen and (max-width: 1024)
This will not work, so px should be added as the following
#media screen and (max-width: 1024px)
try
#media only screen and (min-width: 768px) and (max-width: 1024px) {
}
you can also make another file like: smallScreen.css and add it directly in your head tag under your main stylesheet using this code:
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" media="only screen and (max-width:768px) "href="/smallScreen.css" />
then you can add style in the new file as well if "only screen and..." doesn't work you may avoid using: only
if someone is still facing issues, one minor reason could be the syntax.
make sure you provided space between {and} and (max-width:1500px} --->
wrong one ----->
#media only screen and(max-width:1500px){
body{
background-color: coral;
}
}
right one ------>
#media only screen and (max-width:1500px){
body{
background-color: coral;
}
}
only a single space could decrease your frustration level drastically.
I am writing a media query for a web-page and managed to write media queries for 480px and more. But when I write media query for 320px it doesn't work properly. I want to capture the portrait views of most of the mobiles( iphone4, iphone5,iphone3,asus galaxy 7,samsung galaxy sII, samsung galaxy s3 ) which is 320px. The webpage I created was working with landscape views in these devices but doesnt scale for portrait views. Can anybody please point out the error in the query. This is the media queries I used.
#media (max-width: 320px)
{
html
{
font-size:0.1em;
}
}
#media (max-width: 480px)
{
html
{
font-size:0.20em;
}
}
#media (max-width: 767px)
{
html
{
font-size:0.38em;
}
}
#media (min-width: 768px) and (max-width: 979px)
{
html
{
font-size:0.65em;
}
}
#media (min-width : 980px) and (max-width:1025px)
{
html
{
font-size:0.7em;
}
}
For 320px I also tried with
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait)
{ /*Styles */}
and
#media only screen
and (max-width : 320px) {
/* Styles */
}
But none of them is working.Am I doing anything wrong/missing something?
Thanks in advance
Since you don't have a min-width on your 480 styles, and since those styles come later in your stylesheet, they override anything you put before them.
#media (max-width: 320px) {
html {
font-size:0.1em;
}
}
#media (min-width: 321px) and (max-width: 480px) {
html {
font-size:0.20em;
}
}
...
A
#media (max-width: 320px)
{
html { font-size:0.1em; }
}
B
#media (max-width: 480px)
{
html { font-size:0.20em; }
}
Using the above, consider a 320px viewport.
A and B are true, as 320 hits the limit of A and falls well below the max of B. But since B overrides A by being declared later in the stylesheet, font-size is dictated by the later declaration -- B
Adding a min-width:321px requirement to B would force B to test false for the 320px viewport -- so font-size would stay at 0.1em until B became true (minimum width of 321px).
EDIT (maybe a better way to think about it)
Instead of using max, max, max, why not take advantage of the min-width, until you reach a UI that may be best served with a range (like a tablet)
/* Set a base */
html { font-size:62.5% }
/* iPhone landscape range */
#media (min-width:321px) and (max-width:480px) {
html { font-size:1.2em }
}
/* larger than iPhone landscape, an in the iPad portrait range */
#media (min-width:481px) and (max-width:768px) {
html { font-size:1.6em }
}
/* bigger than iPad portrait */
#media (min-width:769px) {
html { font-size:2em }
}