Okay, so I have a couple of media queries at different break-points in my design.
For example
#media all and (max-width:700px){
body{
background:red;
}
}
#media all and(max-width:560px){
body{
background:blue;
}
}
It works fine on my desktop, but when I go to view it on my LG android browser, only the first media query triggers.
It doesn't have anything to do with the widths, because if I change the max-width of the first query to something less than 560 it gets triggered anyway.
Any thoughts on this?
Remove the "all and"s:
http://jsfiddle.net/C3R9J/
#media (max-width:700px){
body{
background:red;
}
}
#media (max-width:560px){
body{
background:blue;
}
}
Take a look at Example 5 this link to WC3:
http://www.w3.org/TR/css3-mediaqueries/
if the media type is not explicitly given it is ‘all’.
You can try with min-width. What it does: device width from 320px to 559px, device width from 560px to 699px, device width from 700px to XXX. The latest media type will overwrite all others media type.
#media only screen and (min-width: 320px) {
body { background:red; }
}
#media only screen and (min-width: 560px) {
body { background:blue; }
}
#media only screen and (min-width: 700px) {
body { background:green; }
}
Related
I need to make my page responsive for a phone with a max-width of 500px. Normally I'd do #media screen and (max-width: 500px), but they want me to use LESS and create a #phone variable that contains the media string. Right now I'm nesting the media query inside of #phone like this:
#phone {
#media screen and (max-width: 500px) {
}
}
But I'm getting an error that says "unknown at rule at #phone", so presumably that's wrong. Am I at least in the ballpark? What needs to change?
Hope this helps
#phone: ~"only screen and (max-width:500px)";
#media #phone {
body {
font-size: 30px;
}
}
After compiling above code it will result like below
#media only screen and (max-width:500px) {
body {
font-size: 30px;
}
}
DEMO
#media only screen and (min-width : 1824px) {}
#media only screen and (min-width : 1224px) {}
I am using these mediaqueries and these are working fine but when I see my website at 1280px resolution, it does not work
Try like this:
#media screen and (min-width: 1024px) and and (max-width:1280px)
{
.....
}
#HMS Designz, If you want to access media query 1280 to 1024 resolution. You can try like this.
#media screen and (min-width:1024px) and (max-width:1280px) {}
#media all and (min-width: 1280px) {
/* css for width greater than 1280px */
}
#media all and (max-width: 1280px) and (min-width: 1024px) {
/* css for width between 1280px and 1024px */
}
#media all and (max-width: 1023px) {
/* css for width less than 1024px */
}
Here is detailed explainition of media queries.
include this in <head></head> (if you have not)
<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.
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
You are not create any media query for 1280 px resolutions. First create media query for that resolution using following media query.
#media screen and (min-width:1024) and (max-width:1280px)
{
}
I need to lose the background image in mobile view but my #media query seems to be ignoring the request, this also applies to an image I am using too?
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.logo {
background-image:URL(img/allthingslogoalt.gif);
height:32px;
width:222px;
margin:110px auto 0 auto;
background-size:444px 64px;
}
}
}
#media screen and (max-device-width: 800px) {
#allthingsus {
background-color:#FFF;
}
}
#media screen and (max-device-width: 480px) {
#allthingsus {
background-color:#FFF;
}
}
Here is the main css:
.logo {
background-image:URL(img/allthingslogo.gif);
height:64px;
width:444px;
margin:180px auto 0 auto;
}
#allthingsus {
background-color:#FFF;
background-image:URL(img/greypointer.gif);
background-repeat:no-repeat;
background-position:top center;
}
i am not sure how to cure this problem? I have tried adding it as a class, an ID, changing the min/max heights but nothing changes?
Assuming this is the bit that is attempting to change your background image:
#media screen and (max-device-width: 480px) {
#allthingsus {
background-color:#FFF;
}
You're only setting a background-color and therefore not changing the background-image. You need to set background-image: none; for this media query.
Edit
Couldn't really test using the media query max-device-width so have done a fiddle here (http://jsfiddle.net/rnewport/em35H/1/) using max-width instead and it seemed to be working ok for that
I Have this simple media query to check resolution of browser and accordingly display or hide the image... But it works only on Chrome and does not work on firefox and IE. any idea whats wrong with my code? or any suggestions what can I do?
#media screen and (max-width: 1030px) {
#img{
display:none;
}
}
#media screen and (min-width: 1031px)
{
#img{
display:block;
}
}
Here is my HTML:
<div id="img"><img src="images/bg.png" height="575px" style="position:absolute; margin-left:6px;" style="z-index:100;"/></div>
Without seeing your html I will assume that you are attempting to hide an image with and id of image? If so I would do the following.
Change the id of img to be a class, for example we will use .image-class this will mean the style can be re-used on other images on the page as IDs have to be unique.
So your html should look similar to this:
<img class="image-class" src="http://placekitten.com/500/500" alt="kitten" />
And then for your CSS:
/* Mobile first strategy (no media query required) - images will not display when under 1030px)*/
.image-class {
display: none;
}
/* Images will display above 1030px */
#media screen and (min-width: 1030px) {
.image-class {
display: block;
}
}
See this fiddle
try display:inline-block;
#media screen and (max-width: 1030px) {
#img{
display:none;
}
}
#media screen and (min-width: 1031px)
{
#img{
display:inline-block;
}
I want to get the screen width as a variable for a simple if statement. Basically if the screen is > 768 it will display the normal website. If it's < 768 than it displays a more compact version. It's just a little fix for ipad resolution. I already know how to update the webpage once i get the info, just how do I get the values in the first place?
use javascript..
there is a property called
.screenwidth()
here is a link:
http://www.w3schools.com/jsref/prop_screen_width.asp
You could use CSS media queries:
#media all and (max-width: 768px) {
body {
background: #ccc;
}
}
Further reading:
http://css-tricks.com/css-media-queries/
You need CSS3 media queries
http://www.w3.org/TR/css3-mediaqueries/
http://webdesignerwall.com/tutorials/css3-media-queries
/* Any CSS for bigger screens / default CSS goes outside the brackets */
div {
/*here*/
}
p {
/*or here*/
}
#media screen and (max-width: 768px) {
/*css specific to small screens under 768px width here*/
div {
/*here*/
}
p {
/*or here*/
}
}