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
I have a DIV with a background image. I want the image to display on the screen (which works already) but I do NOT want that image to print when the page is printed. Is there a way in CSS to accomplish this?
You can add a print stylesheet that removes the image for printing purposes...
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Inside the print stylesheet, you just use normal CSS, which will only apply when printing, for example...
.myStyle {
background-image:none;
}
I think media queries will helpful for you
#media print
{
div.test {background:none;}
}
You can use a media query
#media print {
#yourDiv { background-image:none; }
}
OR load a print specific style sheet where you overwrite the background.
If you need to target IE 8 or earlier, favour the print stylesheet approach, as these browsers don't support media queries.
It seems like there should really be an easy solution to this, but so far I've been unsuccessful in finding one.
I'm using Zurb Foundation and I'm basically creating a live form that takes inputs from a form (above), and fills in a content (below) using angular.js. Users will then print the page to a PDF. I'd like to maintain the layout I have for the content below, and I'd like to hide the form above when printing. Zurb has a fine "hide-for-print" css rule that seems like it should work just fine when applied to the form above, but when I toggle print stylesheets, it basically strips all CSS and goes back to ugly.
Suggestions?
What I have done in these type situations is use a separate file for the print.css.
<link rel="stylesheet" type="text/css" href="global.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
If the browser is printing, the global.css file will be loaded first and than the print.css file will overwrite anything aftewards.
Keep in mind though, that all background: * rules will be turned off in all browsers by default when printing, so some styles are going to be compromised regardless.
Have you tried using CSS media queries for print media?
.foo {
height:150px;
width:150px;
background-color:#F00 // see what I did there?
}
.bar {
height:10px;
width:50%;
border-radius:5px;
background-color:#000
}
.baz {
width:100px;
height:150px;
background-color:#FFF;
}
#media screen {
.baz {
display:block;
}
}
#media print {
.baz {
display:none;
}
}
Now, only some of .baz's properties are targeted by the media queries. You can feel free to put in any of .baz's properties inside or outside of the queries themselves. Likewise, you can put all of .baz's properties in the media query, but I gather that's not what you're looking for.
idk about zurb's print style sheets, and without an example, it's pretty hard to answer, but you can use weasyprint, open source library to convert html/css to pdf https://github.com/Kozea/WeasyPrint
Support seems to be different across browsers..
Check the link
Firefox: Black with white text.
Opera, Chrome, IE9: Blue with black text.
Which is correct and how would I make it consistent?
The code
#media screen and (min-width: 480px) {
body{
background-color:#6aa6cc;
color:#000;
}
#media screen and (min-width: 768px) {
body{
background-color:#000;
color:#fff;
}
}
}
Interestingly enough it appears that nesting media queries within a conditional #import does seem to work.
e.g:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Media test</title>
<link rel="stylesheet" type="text/css" href="importer.css" />
</head>
<body>
<h1>Why is this not consistent.</h1>
</body>
</html>
importer.css
#import url(media.css) screen and (min-width: 480px);
media.css
body {
background-color: #6aa6cc;
color: #000;
}
#media screen and (min-width:768px) {
body {
background-color: #000;
color: #fff;
}
}
For those simply looking for an answer to "Which browsers support nesting of #media rules?", the short answer is that all modern browsers, including Firefox, Safari, Chrome (and its derivatives), and Microsoft Edge, now support nesting of #media at-rules as described in CSS Conditional 3. The code in the question with the nested #media at-rules should now work correctly everywhere, with the exception of Internet Explorer (which is no longer being updated with new features, meaning no version of IE will ever support this feature).
This feature did not exist in CSS2.1, since only media types existed at the time which you could simply group with a comma, which explains why support for this was very poor at the time this question was first asked.
What follows is an analysis of the original question with these historical limitations in mind.
There's a bit of terminology confusion that needs clearing up in order for us to understand what exactly is happening.
The code you have refers to #media rules, and not so much media queries — the media query itself is the component that follows the #media token, whereas the rule is the entire block of code consisting of #media, the media query, and the rules nested within its set of curly braces.
This may cause confusion among many when it comes to using media queries in CSS, as well as your specific case where a #media rule in an imported stylesheet works correctly even when the #import is accompanied by another media query. Notice that media queries can occur in both #media and #import rules. They're the same thing, but they're being used to restrictively apply style rules in different ways.
Now, the actual issue here is that nested #media rules are not valid in CSS2.1 because you're not allowed to nest any at-rules within #media rules. However, things seem quite different in CSS3. Namely, the Conditional Rules module states very clearly that #media rules can be nested, even providing an example:
For example, with this set of nested rules:
#media print { /* rule (1) */
/* hide navigation controls when printing */
#navigation { display: none }
#media (max-width: 12cm) { /* rule (2) */
/* keep notes in flow when printing to narrow pages */
.note { float: none }
}
}
the condition of the rule marked (1) is true for print media, and the condition of the rule marked (2) is true when the width of the display area (which for print media is the page box) is less than or equal to 12cm. Thus the rule ‘#navigation { display: none }’ applies whenever this style sheet is applied to print media, and the rule ‘.note { float: none }’ is applied only when the style sheet is applied to print media and the width of the page box is less than or equal to 12 centimeters.
Furthermore, it looks like Firefox is following this specification and processing the rules accordingly, whereas the other browsers are still treating it the CSS2.1 way.
The grammar in the Syntax module hasn't been updated to reflect this yet, though; it still disallows nesting of at-rules within #media rules as with CSS2.1. This specification is slated for a rewrite anyway, so I guess this doesn't matter.
Basically, CSS3 allows it (pending rewriting the Syntax module), but not CSS2.1 (because it neither defines media queries nor allows nested #media rule blocks). And while at least one browser has begun supporting the new spec, I wouldn't call other browsers buggy; instead, I'll say that they simply haven't caught up yet as they're really conforming to an older, more stable spec.
Lastly, the reason why your #import works is because #import is able to work conditionally with the help of a media query. However this has no relation to the #media rule in your imported stylesheet. These are in fact two separate things, and are treated as such by all browsers.
To make your code work consistently across browsers, you can either use your #import statement, or, since both of your rules use min-width, simply remove the nesting of your #media rules:
#media screen and (min-width: 480px) {
body {
background-color: #6aa6cc;
color: #000;
}
}
#media screen and (min-width: 768px) {
body {
background-color: #000;
color: #fff;
}
}
Is there some means of specifying the default media type for a browser (let's say chrome), so that I can test css #media styles?
#screen
{
div { background-color:red; }
}
#handheld
{
div { background-color:lime; }
}
<div style="width:100px;height:100px"></div>
Such that I could (without touching my code) test the two media types in the browser? Changing the media type would change the color of the div above. A chrome extension, a bit of javascript or some other magic would be greatly appreciated.
Could this be what you're looking for?
Web Developer extension for Chrome
The web developer extension has a feature called "Display CSS By Media Type". If this doesn't help you, you could always make one stylesheet per media type and use the import css statement to specify which type to load:
#import url("handhelds.css") screen;
Ilya on Stackoverflow wrote this answer, I found it easy and useful:
There's a simple way to test handheld css with with media queries:
#media handheld, screen and (max-width: 500px) { /* your css */ }
After that you can test on browsers that implement media queries by resizing the window to less than 500px.
That's all!