In the styles.css, I am using media queries, both of which use a variation of:
/*--[ Normal CSS styles ]----------------------------------*/
#media only screen and (max-width: 767px) {
/*--[ Mobile styles go here]---------------------------*/
}
The sites resize to the layout I want in a regular browser (Safari, Firefox) when I shrink the window, however, the mobile layout isn't shown at all on a phone. Instead, I just see the default CSS.
Can anyone point me in the right direction?
All three of these were helpful tips, but it looks like I needed to add a meta tag:
<meta content="width=device-width, initial-scale=1" name="viewport" />
Now it seems to work in both Android (2.2) and iPhone all right...
Don't forget to have the standard css declarations above the media query or the query won't work either.
.edcar_letter{
font-size:180px;
}
#media screen and (max-width: 350px) {
.edcar_letter{
font-size:120px;
}
}
I suspect the keyword only may be the issue here. I have no issues using media queries like this:
#media screen and (max-width: 480px) { }
i used bootstrap in a press site but it does not worked on IE8, i used css3-mediaqueries.js javascript but still not working. if you want your media query to work with this javascript file add screen to your media query line in css
here is an example :
<meta name="viewport" content="width=device-width" />
<style>
#media screen and (max-width:900px) {}
#media screen and (min-width:900px) and (max-width:1200px) {}
#media screen and (min-width:1200px) {}
</style>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script type="text/javascript" src="css3-mediaqueries.js"></script>
css Link line as simple as above line.
Including a meta tag like below can cause the browser to handle the viewport zooming differently.
<meta content="width=device-width, initial-scale=1" name="viewport" />
Today I had similar situation. Media query did not work. After a while I found that space after 'and' was missing.
Proper media query should look like this:
#media screen and (max-width: 1024px) {}
The sequential order of css code also matters, for example:
#media(max-width:600px){
.example-text{
color:red;
}
}
.example-text{
color:blue;
}
the above code will not work because of the execution order. Need to write as following：
.example-text{
color:blue;
}
#media(max-width:600px){
.example-text{
color:red;
}
}
Always mention max-width and min-width in some unit like px or rem. This figured it out for me. If I write it without the unit and only the number value, browser can't read the media queries. example:
this is wrong
#media only screen and (max-width:950)
and
this is right
#media only screen and (max-width:950px)
The OP's code snippet clearly uses the correct comment markup but CSS can break in a progressive way — so, if there's a syntax error, everything after that is likely to fail. A couple times I've relied on trustworthy sources that supplied incorrect comment markup that broke my style sheet. Since the OP provided just a small section of their code, I'd suggest the following:
Make sure all of your CSS comments use this markup /* ... */ -- which is the correct comment markup for css according to MDN
Validate your css with a linter or a secure online validator. Here's one by W3
More info:
I went to check the latest recommended media query breakpoints from bootstrap 4 and ended up copying the boiler plate straight from their docs. Almost every code block was labeled with javascript-style comments //, which broke my code — and gave me only cryptic compile errors with which to troubleshoot, which went over my head at the time and caused me sadness.
IntelliJ text editor allowed me to comment out specific lines of css in a LESS file using the ctrl+/ hotkey which was great except it inserts // by default on unrecognized file types. It isn't freeware and less is fairly mainstream so I trusted it and went with it. That broke my code. There's a preference menu for teaching it the correct comment markup for each filetype.
I encountered this issue recently too, and I later found out it was because I didn't put a space between and and (.
This was the error
#media screen and(max-width:768px){
}
Then I changed it to this to correct it
#media screen and (max-width:768px){
}
It may also happen if the browser zoom level is not correct. Your browser window zoom should be 100%. In Chrome use Ctrl + 0 to reset the zoom level.
Throwing another answer into the ring. If you're trying to use CSS variables, then it will quietly fail.
#media screen and (max-device-width: var(--breakpoint-small)) {}
CSS variables don't work in media queries (by design).
Weird reason I've never seen before: If you're using a "parent > child" selector outside of the media query (in Firefox 69) it could break the media query. I'm not sure why this happens, but for my scenario this did not work...
#media whatever {
#child { display: none; }
}
But adding the parent to match some other CSS further up the page, this works...
#parent > #child { display: none; }
Seems like specifying the parent should not matter, since an id is very specific and there should be no ambiguity. Maybe it's a bug in Firefox?
Add Below tag in html's head section
<meta content="width=device-width, initial-scale=1" name="viewport" />
I use a few methods depending.
In the same stylesheet i use: #media (max-width: 450px), or for separate make sure you have the link in the header correctly. I had a look at your fixmeup and you have a confusing array of links to css. It acts as you say also on HTC desire S.
#media all and (max-width:320px)and(min-width:0px) {
#container {
width: 100%;
}
sty {
height: 50%;
width: 100%;
text-align: center;
margin: 0;
}
}
.username {
margin-bottom: 20px;
margin-top: 10px;
}
due to only not typo mistake not work for me
#media screen and(max-width: 930px) require sopace between the (and) & opening bracket #media screen and (max-width: 930px)
The Only Fix You All Need Is :
Just Take All The Media Queries At The End Of A .CSS File
It Works, Try It
It is important that the #media screen must be at the end of the css
For me I had indicated max-height instead of max-width.
If that is you, go change it !
#media screen and (max-width: 350px) { // Not max-height
.letter{
font-size:20px;
}
}
For everyone having the same issue, make sure you actually wrote "120px" instead of only "120". This was my mistake and it drove me crazy.
Well, in my case, the px after the width value was missing ... Interestingly, the W3C validator did not even notice this error, just silently ignored the definition.
I was having this same problem and it turns out my media queries were in the wrong order. They should be defined from widest to smallest in the CSS
Can't say is it a real problem or I'm just being paranoid but this behavior of media queries is really driving me crazy for last couple of hours.
Let's consider this really simple CSS.
body {background:yellow}
#media (max-width:399px) {
body {background:red}
}
#media (min-width:400px) {
body {background:blue}
}
Problem happens when width is 399.333px! (or any float-value between 399 and 400 integers)
My logic says that by using this CSS style page will never turn yellow, right? It should be red when viewport size is shorter than 400px in width and blue when it's 400px and over.
Weird behavior happens with Opera browser (I'm using 36.0 at the moment) on Windows when page is zoomed-in. I understand that viewport width is calculated using real viewport width and current zoom-level and this value should always be integer. But...
Looks like Opera doesn't round/floor/ceil that value which affects on entire page. I'm getting yellow background when Opera finds out that viewport-width is not 399px or 400px but it's 399.333px!? So none of media queries fulfills condition.
I've already tried to find an answer here and web-wide but nothing is close enough to this problem. This problem already happened to me when I was using em units so I could work around and turn them to pixels, but I can't affect user's decision about using browser's zoom feature.
Is there something I can do to prevent this or that's just the way it is?
The easiest way to simulate this behavior is hitting CTRL,+ three times and than easily move vertical slider in Object Inspector.
update:
Yes, I can fix it with "mobile/desktop first" approach by linking each media break-point to previous one but that's not part of my question. Also, default body style is here as visual aid only and changing that really doesn't solve problem.
A simple solution could be the following:
body {background:yellow}
#media (max-width:400px) {
body {background:red}
}
#media (min-width:400px) {
body {background:blue}
}
The rules in the last media query will simply overwrite any parameters that exist previously, just because of the order.
That way there won't be a situation/width which isn't covered by these two media queries: Everything up to 399.9999... (whatever) fulfills the first condition, everything above 400 will meet the second condition, and if the width is exactly 400, the rules in the second media query will overwrite the previous ones due to their order.
Similar layout
The answer to this question should be to avoid the problem altogether, and simply leave one of the media queries out, and let one media query override the other:
body {background: red;}
#media (min-width: 400px)
{
body {background: blue;}
}
However, when you need a fundamentally different layout, this would cause a lot of additional code simply to reset one case from the other. As is the case in the following example:
.some-element {background-color: red;border-left: 30px;}
#media (max-width: 399px)
{
.some-element {border-left: none;padding-bottom: 40px;}
}
Whereas it would be shorter and more elegant to write:
.some-element {background-color: red;}
#media (min-width: 400px)
{
.some-element {border-left: 30px;}
}
#media (max-width: 399px)
{
.some-element {padding-bottom: 40px;}
}
But neither of the media-queries in the last example code will take effect if the width is for instance 399.5px. Read the next part of this answer, if you still wish to write such code with perfect coverage.
Use floating-point numbers
Unfortunately the media queries for min-width and max-width values are always inclusive. A browser uses fractional pixels when it has zooming capabilities. Therefore, a simple solution to this problem is to increment your threshold pixel value of 400px with the lowest possible fraction, for instance to 400.00001px. However, the crucial question then remains, what is the lowest possible fraction?
The CSS specification does not say anything about which data types are used to store numbers:
A <number> can either be an <integer>, or it can be zero or more digits followed by a dot (.) followed by one or more digits.
But according to the answer to 'Why does Bootstrap use a 0.02px difference between screen size thresholds in its media queries?':
Indeed, cross-browser compatibility is the reason: according to Bootstrap's source, 0.02px is used "rather than 0.01px to work around a current rounding bug in Safari.
Apparently, bootstrap being a widely used framework, it seems that 0.02 would be the correct value to use in this specific case.
In your case, to get a perfect coverage of your media queries - and thereby prevent a yellow background, the solution would look like this:
body {background: yellow;}
#media (max-width:400px) {
body {background: red;}
}
#media (min-width:400.02px) {
body {background: blue;}
}
Use CSS4
As of CSS4 you may use intuitive operators for media queries such as >= and <= instead of min- and max-, and more importantly, additionally you may use exclusive operators such as > and < which immediately solves the problem (see here).
However, it may not be widely supported. Unfortunately, this feature is not yet on Can I Use to check browser support. You may check it yourself using this codepen. It seems to work in the latest version of Firefox.
The solution would then be as simple as:
body {background: yellow;}
#media (width <= 400px) {
body {background: red;}
}
#media (width > 400px) {
body {background: blue;}
}
Got some weird stuff going on. Trying to fix up an old WordPress theme which was never designed for mobile and I found issues once I added media queries. They seem to be what I want overall on mobile devices but once I hit desktop, everything looks messed up as if it's adapting to the mobile media queries and I'm really confused as to why. Am I supposed to add something to the desktop styles to make this work overall? Here's my site in question: http://destinationbeershow.com/
If you have
<body class="mobile">
at your mobile version and you specify the .mobile in all your rules affecting only mobile, then I guess you will be out of the woods.
Actually, i just solved it. I had min-width for those elements when I meant to use max-width. Duh! I think I'm out of the woods.
You might want to clarify with at least one or two examples of the specific problems you're encountering, but just looking at one or two elements, remember some basic CSS rules.
When using media queries, any rules meeting the conditions will be triggered.
Rules overwrite each other top to bottom, which means whatever is listed last will be the property used.
If you're encountering problems when your rules look different, remember that whether CSS rules overwrite each other depends on a rule's specificity. (This is more of a side note, but important to remember. See this article on calculating CSS specificity if this is a problem you're encountering.)
For example:
#media (min-width: 768px) {
#content {
width: 656px;
}
}
#media (min-width: 480px) {
#content {
width: 100%;
}
}
Once the viewport (browser window size) is 480px your element with id="content" will be 100% width. Then, when your viewport is 768px, it will still be 100% width, because the second rule is overwriting the first one since both rules are true.
If you want rules to override the smaller media query rule, then you have to make sure your larger size media query comes after. For example:
#media (min-width: 480px) {
#content {
width: 100%;
}
}
#media (min-width: 768px) {
#content {
width: 656px;
}
}
Hope that makes sense.
Say for example I had this:
#media screen and (min-width: 480px) {
.example {
background-color: red;
}
}
What if I view this page in Internet Explorer 8? Will it still color .example red even though the width is over 480px, or will it just ignore the stuff in the media query? (I can't test it because I don't have IE8 :P)
I've just tried it out in IE7/IE8 browser/document modes (IE10), and it completely ignores all CSS inside Media queries for me as I assumed it would do. .example turns out with a red background only in IE9+.
The only section in the specification I can find which is (probably) relevant to what actually happens here is the Error handling section.
I'm trying to just flat out kill my responsive Web Design and CSS3 Media Queries for all IE browsers below 8, and just have the fixed, locked, layout.
I've tried, inserting 'if IE 8+ conditionals' around my media queries within my css and it was ignored. Anyone have any simple concrete methods aside from calling in a new seperate stylesheet?
How about doing feature detection with Modernizr. http://www.modernizr.com/
I would suggest combining more CSS with the rules inside the media query to shut out IE8 and below. For example (where the class "nevergonnahappen" isn't used on anything)
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.example:not(.nevergonnahappen) {
color: red;
}
}
IE8 and below will ignore the media query and execute the code, but since IE8 and below don't support ":not" the rule will not match anything and so won't be executed. Modern browsers will understand ":not", but since nothing actually has a class of "nevergonnahappen" nothing is excluded.
If you're using Modernizr you could use a feature detection class to exclude IE8 instead of the not sudoclass.
.touch .example {...}
instead of
.example:not(.nevergonnahappen) {...}
where the ".touch" class is put in for touch-screen devices.
Here are hacks discovered after you posted your question, to target specific IE versions as fallback: http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/
And a way here, to apparently filter for IE6/7 like this, with the IE8 ignore caveat:
#media screen and (min-width:640px), screen/9 {
body {
background: green;
}
}
"This allows all non-IE browsers to render the styles and keeps media
query support in IE9/10. It also creates a pass-through filter for
IE6/7 but we’re still stuck with IE8 ignoring the entire block".
http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/#comment-3393 by Keith Clark